텍스트 위로 마우스를 가져 가면 감지 할 수 있습니까?

Question

필자가 실제로하는 것은 커서가 "텍스트"유형으로 변경 될 때를 감지하는 것입니다. 즉, 텍스트 위로 마우스를 가져 가면 감지합니다. 내가 맴돌고있는 요소 유형을 살펴 보았습니다. 그러나 실제로 포함 된 요소를 모르기 때문에 너무 정확하지 않습니다.

CSS 커서 속성을 감지하는 것은 이전에 나를 할당 한 경우에만 가능하다는 것을 알고 있습니다.

전혀 가능합니까? 이 일에 대해 어떻게 생각하세요?

EDIT : 확인하고 싶지 않습니다. 현재 특정 요소를 살펴본 후 해당 요소 내의 모든 텍스트 위로 마우스를 가져 가면 알고 싶습니다. div는 브라우저의 너비가 100 % 일 수 있지만 왼쪽 끝에 텍스트가 더 짧습니다. 요소의 특정 부분 위로 마우스를 가져갈 때를 감지하고 싶지 않습니다.

Answer 1

커서가 변경되었는지 감지 할 필요가 없습니다.

마우스가 구조의이 종류를 사용하여 텍스트를 유혹하는 경우 당신은 간단하게 검색 할 수 있습니다 : 당신이 ID를하지만, 클래스 또는 태그가없는 경우

document.getElementById('myTextId').onmouseover = function() { 
    // do something like for example change the class of a div to change its color : 
    document.getElementById('myDivId').className = 'otherColor'; 
}; 

, 당신은 getElementsByClassName에 의해에서 getElementById를 대체 할 수 또는 getElementByTagName (반복 할 배열을 반환합니다).

요소를 떠날 때 색상을 복원하려면 같은 방법으로 onmouseout 이벤트를 바인딩하는 것이 좋습니다. 당신이 어떤 단락에 뭔가를하려는 경우

예를 들어, 당신이 그렇게 할 수 있습니다 : 당신이 이런 것들을 많이 할 계획

var paras = document.getElementByClassName('p'); 
for (var i=0; i<paras.length; i++) { 
    paras[i].onmouseover = function() { 
     // do something like for example change the class of a div to change its color : 
     document.getElementById('myDivId').className = 'otherColor'; 
    }; 
} 

, 난 당신이 JQuery와 및 튜토리얼을보고 제안 .

Answer 2

당신은 jQuery를 사용하는 경우 (jQuery를 굉장하기 때문에 당신이해야하는), 이렇게 :

$("#myDiv").mouseover(function() { 
    $("#myDiv").css("background-color", "#FF0000"); 
}); 

Answer 3

한 가지 가능한 방법은 당신의 DOM의 모든 텍스트 노드를 찾아 스팬에서 그들을 래핑하는 것입니다 특정 클래스. 그럼 당신은 그 클래스를 선택하고 그것으로 당신이 원하는 무엇이든 할 수있다 :

// Wrap all text nodes in span tags with the class textNode 
(function findTextNodes(current, callback) { 
    for(var i = current.childNodes.length; i--;){ 
     var child = current.childNodes[i]; 
     if(3 === child.nodeType) 
      callback(child); 
     findTextNodes(child, callback); 
    } 
})(document.body, function(textNode){ // This callback musn't change the number of child nodes that the parent has. This one is safe: 
    $(textNode).replaceWith('<span class="textNode">' + textNode.nodeValue + '</span>'); 
}); 

// Do something on hover on those span tags 
$('.textNode').hover(function(){ 
    // Do whatever you want here 
    $(this).css('color', '#F00'); 
},function(){ 
    // And here 
    $(this).css('color', '#000'); 
}); 

JSFiddle Demo

은 분명히이 스팬 태그를 많이 사용하여 DOM을 채울 것입니다, 당신은 페이지로드에 한 번이 작업을 수행 할 수 왜냐하면 다시 실행하면 범위가 두 배가되기 때문입니다. 이미 CSS에 적용한 CSS가 있으면 이상한 일도 발생할 수 있습니다.