Есть ли способ обнаружить, что я курю над текстом?

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

Если у вас нет идентификатора, но класс или тег, вы можете заменить 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 и его учебник ,

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.