テキストの上にマウスを乗せているかどうかを検出する方法はありますか？

Question

私が実際に何をしているのは、カーソルがタイプ「テキスト」に変わったとき、つまりテキストの上にカーソルを置いたときを検出することです。私はホバリングしている要素の型を調べてみましたが、実際に何が入っているのかわからないので、これはあまり正確ではありません。

CSSカーソル属性の検出は、以前に私によって割り当てられている場合にのみ可能であることを理解しています。

これはまったく可能ですか？あなたはこれについてどうやって行きますか？

EDIT： 私は現在特定の要素を超えている場合、その要素内のテキストにカーソルを合わせるかどうかを知りたいと思っています。 divはブラウザの100％の幅にすることができますが、一番左側のテキストは短くします。私は要素のちょうど一部の上にホバリングするときを検出したくない。

Answer 1

カーソルが変更されたかどうかを検出する必要はありません。

マウスはコンストラクトのこの種を使用してテキストをホバリングされている場合は、単純に検出することができます：

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'; 
}; 

あなたはIDが、クラスまたはタグを持っていない場合、あなたはの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

1つの可能な方法は、あなたの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

明らかにこれは、spanタグの多くのあなたのDOMを記入し、あなただけのページのロードに一度これをやってみたいですなぜなら、もう一度実行すると、スパンの数が倍になるからです。これは、スパムに既に適用されているカスタムCSSを使用している場合、奇妙なことを行う可能性もあります。