jQuery + текст CSS не работает

Question

Мне нужна помощь с моей страницей. Я пытаюсь показать текст наведения с помощью jQuery, но он не работает должным образом.

Это как моя страница выглядит:

Все о том выборе клана, потому что те, которые я поставил код будет понять больше.

JQuery код:

$(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 разметка:

<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> 

и 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); 
} 

Так что, если код, как это все работает, но дело в том, что она работает только на области радиокнопки, и я хочу, чтобы он работал на целом изображении, потому что они связаны с CSS, но когда я Ried использовать класс как .drinkcard-cc или иначе я не получил никакого результата в месте, где должен быть парения текст, который я получил точку

Answer 1

Ваше mousemove событие связано с <input> элемента, что делает его только огонь, когда вы mousemove на фактической радио-кнопки. jQuery, в некотором смысле, является «глупым», он не знает, что он должен также запускать вашу функцию на mousemove на <label>, просто потому, что вы этого не сказали.

Посмотрите на следующий фрагмент кода, я изменил свой код, чтобы соответствовать вашим потребностям:

$(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 Вот скрипку, проверить его. Также обновил js, который я только что написал, потому что e.clientY-275 над e.clientX-330 сделал <div> невидимым на экране.