Javascript ou Jquery vérifie si survolant un élément

Question

L'objectif est d'avoir plusieurs éléments déclenchent un message texte spécifique pour chacun d'eux lorsque la souris est dessus, et pas de texte si aucun d'entre eux n'est survolé. D'autres questions, j'ai trouvé que $("#id").is(":hover") devrait retourner vrai si la souris est sur l'élément, mais il ne semble pas le faire. Ils renvoient tous faux et le texte est "Aucun"

HTML:

<input class="r_check" type="checkbox" id="r1" name="rating" value="1"><label for="r1"></label> 
<input class="r_check" type="checkbox" id="r2" name="rating" value="2"><label for="r2"></label> 
<input class="r_check" type="checkbox" id="r3" name="rating" value="3"><label for="r3"></label> 

<p class="text" id="the_text"></p> 

Javascript/Jquery:

$(document).ready(function(){ 
var text = $("#the_text"); 

    if($("#r1").is(":hover")){ 
     text.html("Low"); 
    }else if($("#r2").is(":hover")){ 
     text.html("Medium"); 
    }else if($("#r3").is(":hover")){ 
     text.html("High"); 
    }else{ 
     text.html("None"); 
    } 

}); 

J'ai essayé de remplacer les champs d'entrée avec de simples <p id="r1">input 1</p> éléments pour voir si la label ou la classe des entrées empêche l'événement hover, mais cela n'a pas fonctionné non plus.

Answer 1

Votre problème peut être écrit dans un beaucoup plus propre et plus facile comme ci-dessous

Working JSFiddle

<input class="r_check" type="checkbox" id="r1" name="rating" value="1" data-text="Low"> 
<input class="r_check" type="checkbox" id="r2" name="rating" value="2" data-text="Medium"> 
<input class="r_check" type="checkbox" id="r3" name="rating" value="3" data-text="High"> 

<p class="text" id="the_text"></p> 

$(document).ready(function() { 
    $(".r_check").each(function() { 
    $(this) 
     .mouseover(function() { 
     $("#the_text").html($(this).attr('data-text')) 
     }) 
     .mouseleave(function() { 
     $("#the_text").html(''); 
     }); 
    }) 
}); 

Answer 2

$("#id").on("mouseenter", function(e) { });

Cela devrait le faire

Answer 3

Qu'est-ce que vous faites teste si themouse est au-dessus une seule fois lorsque la page est chargée, ce que vous devez faire est d'utiliser un événement qui est déclenché lorsque la souris est sur votre entrée (soit avec $('selector').hover(handlerIn,handlerOut) de jquery ou $('selector').on("mouseenter,function() {});

(Here's the difference)

Working jsFiddle