4

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

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

これはまったく可能ですか？これをどのように行うつもりですか？

編集:現在特定の要素の上にいるかどうかを確認したくありません。その要素内のテキストにカーソルを合わせているかどうかを知りたいです。div はブラウザーの幅 100% である可能性がありますが、左端に短いテキストが表示されます。要素の任意の部分にカーソルを合わせたときに検出したくありません。

4

3 に答える 3

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 がなく、クラスまたはタグがある場合は、getElementById を getElementsByClassName または 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 とそのチュートリアルを参照することをお勧めします。

于 2012-04-30T19:34:47.897 に答える
0

考えられる方法の 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デモ

明らかに、これにより DOM が大量のスパン タグでいっぱいになります。これをページの読み込み時に 1 回だけ実行する必要があります。もう一度実行すると、スパンの数が 2 倍になるからです。カスタム css がすでにスパンに適用されている場合、これは奇妙なことをする可能性もあります。

于 2012-04-30T19:47:17.047 に答える
-1

jQuery を使用している場合 (jQuery は優れているため、使用する必要があります)、次のようにします。

$("#myDiv").mouseover(function() {
    $("#myDiv").css("background-color", "#FF0000");
});
于 2012-04-30T19:38:16.033 に答える