jQuery + CSS-Text funktioniert nicht

Question

Ich brauche Hilfe mit meiner Seite Ich versuche, einen Hover-Text mit jQuery zu zeigen, aber es funktioniert nicht richtig. Diese

ist, wie meine Seite aussieht:

Alles über jene Clan Auswahl ist da, die ich Code setzen Sie mehr verstehen.

jQuery-Code:

$(document).ready(function() { 
    $('input[name="clan"]').mousemove(function(e) { 
    var hovertext = $(this).attr('hovertext'); 
    $('#hovertext').text(hovertext).show(); 
    $('#hovertext').css('top', e.clientY-275).css('left', e.clientX-330); 
    }).mouseout(function() { 
    $('#hovertext').hide(); 
    }); 
}); 

HTML-Markup:

<div id="register2"> 
    <p><b>Registration Step (2/3)</b></p> 
    <b>Choose your clan:</b><br /><br /> 
    <div id="hovertext"></div> 
    <form action="reg3.php" method="post"> 
    <div class="cc-selector-2"> 
     <input type="hidden" name="village" value="<?php echo $village; ?>"> 
     <input id="uchiha" type="radio" name="clan" value="uchiha" hovertext="Uchiha clan"/> 
     <label class="drinkcard-cc uchiha" for="uchiha"></label> 

     <input id="hyuga" type="radio" name="clan" value="hyuga" hovertext="hyuga clan "/> 
     <label class="drinkcard-cc hyuga" for="hyuga"></label> 

     <input id="senju" type="radio" name="clan" value="senju" /> 
     <label class="drinkcard-cc senju" for="senju"></label> 

     <input id="uzumaki" type="radio" name="clan" value="uzumaki" /> 
     <label class="drinkcard-cc uzumaki" for="uzumaki"></label> 

     <input id="taijutsu" type="radio" name="clan" value="taijutsu" /> 
     <label class="drinkcard-cc taijutsu" for="taijutsu"></label> 

     <input id="noclan" type="radio" name="clan" value="noclan" /> 
     <label class="drinkcard-cc noclan" for="noclan"></label><br><br> 
    </div> 
    <input id="loginsubmitbutton2" type="submit" name="next" value="Next"><br><br> 
    </form> 
</div> 

und CSS:

#hovertext { 
    display: none; 
    position: absolute; 
    background-color: white; 
    color: rebeccapurple; 
    border: 1px solid grey; 
    z-index: 99999; 
} 
.cc-selector-2 input { 
    position: absolute; 
    z-index: 999; 
} 
.uchiha { 
    background-image: url(images/clan/uchiha.jpg); 
} 
.hyuga { 
    background-image: url(images/clan/hyuga.jpg); 
} 
.senju { 
    background-image: url(images/clan/senju.jpg); 
} 
.uzumaki { 
    background-image: url(images/clan/uzumaki.jpg); 
} 
.taijutsu { 
    background-image: url(images/clan/taijutsu.jpg); 
} 
.noclan { 
    background-image: url(images/clan/noclan.jpg); 
} 
.m1 { 
    background-image: url(images/ninjas/m1.jpg); 
} 
.m2 { 
    background-image: url(images/ninjas/m2.jpg); 
} 
.m3 { 
    background-image: url(images/ninjas/m3.jpg); 
} 
.m4 { 
    background-image: url(images/ninjas/m4.jpg); 
} 
.f1 { 
    background-image: url(images/ninjas/f1.jpg); 
} 
.f2 { 
    background-image: url(images/ninjas/f2.jpg); 
} 
.f3 { 
    background-image: url(images/ninjas/f3.jpg); 
} 
.f4 { 
    background-image: url(images/ninjas/f4.jpg); 
} 
.drinkcard-cc { 
    cursor: pointer; 
    background-size: contain; 
    background-repeat: no-repeat; 
    display: inline-block; 
    width: 100px; 
    height: 70px; 
    -webkit-transition: all 100ms ease-in; 
    -moz-transition: all 100ms ease-in; 
    transition: all 100ms ease-in; 
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7); 
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7); 
    filter: brightness(1.8) grayscale(1) opacity(.7); 
} 
.drinkcard-cc:hover { 
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9); 
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.9); 
    filter: brightness(1.2) grayscale(.5) opacity(.9); 
} 
.drinkcard-cc2 { 
    cursor: pointer; 
    background-size: contain; 
    background-repeat: no-repeat; 
    display: inline-block; 
    width: 105px; 
    height: 150px; 
    -webkit-transition: all 100ms ease-in; 
    -moz-transition: all 100ms ease-in; 
    transition: all 100ms ease-in; 
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7); 
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7); 
    filter: brightness(1.8) grayscale(1) opacity(.7); 
} 
.drinkcard-cc2:hover { 
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9); 
    -moz-filter: brightness(1.2) grayscale(.5) opacity(.9); 
    filter: brightness(1.2) grayscale(.5) opacity(.9); 
} 

Also, wenn Code wie dies alles funktioniert, aber die Sache ist, dass es funktioniert nur auf Radiobutton Bereich und ich will, dass es auf das ganze Bild funktioniert, weil sie mit einem CSS verbunden sind, aber wenn ich t Ich habe kein Ergebnis anstelle ried eine Klasse wie .drinkcard-cc oder andere zu verwenden, wo Hover Text sein soll ich bekam Punkt

Answer 1

Ihr mousemove Ereignis wird das <input> Element gebunden ist, es nur Feuer machen, wenn Sie mousemove auf dem tatsächlichen Radiobutton. jQuery, in gewisser Weise, ist "dumm", es weiß nicht, sollte es auch Ihre Funktion auf eine mousemove auf der <label> feuern, einfach weil Sie es nicht so gesagt haben.

Blick auf die folgenden Ausschnitt, änderte ich den Code an Ihre Bedürfnisse anzupassen:

$(document).ready(function() { 

    // Bind the mousemove to the label 
    $('label').mousemove(function(e) { 
     var myRadio = $("input#" + $(this).attr('for')); // Fetch the radio that belongs to the label 

     var hovertext = myRadio.attr('hovertext'); // We now have the hovertext 
     $('#hovertext').text(hovertext).show(); 
     $('#hovertext').css('top', e.clientY).css('left', e.clientX); 
    }).mouseout(function() { 
     $('#hovertext').hide(); 
    }); 

    // And bind the mousemove to the input 
    $('input[name="clan"]').mousemove(function(e) { 

     var hovertext = $(this).attr('hovertext'); // We now have the hovertext 

     $('#hovertext').text(hovertext).show(); 
     $('#hovertext').css('top', e.clientY).css('left', e.clientX); 
    }).mouseout(function() { 
     $('#hovertext').hide(); 
    }); 

}); 

EDIT

https://jsfiddle.net/ssc1kpmj/1 Hier ist eine Geige, check it out. Auch aktualisiert die js, die ich gerade schrieb, weil der e.clientY-275 nad der e.clientX-330 machte die <div> nicht sichtbar auf dem Bildschirm.