Y a-t-il un moyen de détecter si je survole du texte ?

Question

Ce que je recherche vraiment, c'est de détecter quand le curseur change pour le type "texte", c'est-à-dire quand je survole un morceau de texte. J'ai essayé de regarder les types d'éléments sur lesquels je survole, mais ce n'est pas très précis car je ne sais pas ce qu'ils contiennent réellement.

Je comprends que détecter l'attribut de curseur CSS n'est possible que s'il a été préalablement attribué par moi.

Est-ce possible du tout ? Comment feriez-vous pour y parvenir ?

MODIFIER : Je ne veux pas vérifier si je suis actuellement sur un élément spécifique, je veux savoir si je survole un texte dans cet élément. Une div pourrait avoir une largeur de 100 % du navigateur, mais avec un morceau de texte plus court à l'extrême gauche. Je ne veux pas détecter quand je survole n'importe quelle partie d'un élément.

Answer 1

Cette réponse à une autre question donne une fonction pour obtenir un nœud à partir d'un point. En utilisant cela, vous pouvez juste vérifier si la souris est sur les boîtes englobantes d'un nœud texte.

function isPointOverText(x, y) {
    const element = document.elementFromPoint(x, y);
    if (element == null) return false;
    const nodes = element.childNodes;
    for (let i = 0, node; (node = nodes[i++]); ) {
        if (node.nodeType === 3) {
            const range = document.createRange();
            range.selectNode(node);
            const rects = range.getClientRects();
            for (let j = 0, rect; (rect = rects[j++]); ) {
                if (
                    x > rect.left &&
                    x < rect.right &&
                    y > rect.top &&
                    y < rect.bottom
                ) {
                    if (node.nodeType === Node.TEXT_NODE) return true;
                }
            }
        }
    }
    return false;
}

window.addEventListener("mousemove", (e) => {
    console.log(isPointOverText(e.clientX, e.clientY))
})

Answer 2

Pas besoin d'essayer de détecter si le curseur a changé.

Vous pouvez simplement détecter si la souris survole votre texte en utilisant ce type de construction :

document.getElementById('myTextId').onmouseover = function() {
    // faites quelque chose comme par exemple changer la classe d'une div pour changer sa couleur :
    document.getElementById('myDivId').className = 'otherColor';
};

Si vous n'avez pas d'identifiant mais une classe ou une balise, vous pouvez remplacer getElementById par getElementsByClassName ou getElementByTagName (qui renverront des tableaux sur lesquels vous itérerez).

Si vous voulez restaurer la couleur en quittant l'élément, je vous suggère de lier l'événement onmouseout de la même manière.

Par exemple, si vous voulez faire quelque chose sur n'importe quel paragraphe, vous pouvez faire ceci :

var paras = document.getElementByClassName('p');
for (var i=0; i

`

Si vous envisagez de faire beaucoup de choses comme ça, je vous suggère de jeter un œil à jquery et à son tutoriel.

`

Answer 3

Une façon possible est de trouver tous les nœuds textuels dans votre DOM et de les envelopper dans un span avec une certaine classe. Ensuite, vous pourriez sélectionner cette classe et faire ce que vous voulez avec :

// Envelopper tous les nœuds textuels dans des balises span avec la classe 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){ // Ce rappel ne doit pas changer le nombre de nœuds enfants que le parent a. Celui-ci est sûr :
    $(textNode).replaceWith('' + textNode.nodeValue + '');
});

// Faire quelque chose au survol de ces balises span
$('.textNode').hover(function(){
    // Faites ce que vous voulez ici
    $(this).css('color', '#F00'); 
},function(){
    // Et ici
    $(this).css('color', '#000');
});

Démonstration JSFiddle

Évidemment, cela remplit votre DOM avec beaucoup de balises span, et vous ne voulez le faire qu'une seule fois lors du chargement de la page, car si vous le lancez à nouveau, le nombre de spans doublera. Cela pourrait également provoquer des comportements étranges si vous avez déjà appliqué des css personnalisées aux spans.

Answer 4

Si vous utilisez jQuery (ce que vous devriez faire, car jQuery est génial), faites ceci :

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