Tout comme ce que j'ai dit dans le titre, je veux cibler l'élément près du curseur.

 <style type="text/css">
   span{
       display: inline-block;
       min-width: 80px;
       border-bottom: 2px solid black;
   }
 </style>


<div contenteditable="true">
  <span></span>
  <span></span>
  <span></span>
</div>

Lorsque les utilisateurs saisissent des mots, je veux vraiment savoir dans quel curseur se trouve.

0
Mr. Hydra 15 juil. 2015 à 10:49

2 réponses

Meilleure réponse

Vous pourriez faire quelque chose comme ça:

// Get all span-elements
var elements = document.getElementsByClassName("span_element");

// Cycle through them and add an onmouseover-function to them
for(var i = 0, length = elements.length; i < length; i++) {
    elements[i].onmouseover = function() {
        console.log(this.id);
    } 
}

Par conséquent, votre html devrait ressembler à ceci par exemple (pour traiter les éléments):

<div contenteditable="true">
  <span id="span1" class="span_element"></span>
  <span id="span2" class="span_element"></span>
  <span id="span3" class="span_element"></span>
</div>

Remarque: Avec jQuery, c'est beaucoup plus facile, car vous avez .focus ().

Note d'accompagnement 2: Veuillez garder à l'esprit qu'il existe une différence entre le curseur de la souris (tel que décrit dans votre message initial et ma réponse) et la position du curseur (où l'utilisateur est en train de taper). Cela peut être différent.

0
jpbaxxter 15 juil. 2015 à 08:23

Vous pouvez attacher un écouteur à l'événement onmouseover pour déclencher une fonction lorsque la souris se trouve au-dessus de l'une de vos plages.

<div contenteditable="true">
 <span onmouseover="myFunction1()"></span>
 <span onmouseover="myFunction2()"></span>
 <span onmouseover="myFunction3()"></span>
</div>

function myFunction1() {
 // the mouse is above span 1
}
// etc...

Documentation officielle ici

Modifier : modification de la réponse après avoir compris ce que l'OP recherchait

Lorsque vous utilisez jQuery et que vous travaillez avec des éléments ajoutés dynamiquement, je vous suggère d'utiliser quelque chose comme ceci:

$(document).on('mouseenter', 'div span', function() {
    $(this).css('border-color', 'red');
})
.on('mouseleave', 'div span', function() {
    $(this).css('border-color', 'black');
});

J'ai créé un exemple JSFiddle ici

0
bviale 15 juil. 2015 à 08:58