yahoo5000 yahoo5000 - 6 months ago 12
HTML Question

Jquery +css text show not working

Hello need help with my page i am trying to show a hover text with a jquey but its not working properly this is how my page looks :
webpage
so everything is about those clan selection cuz ones i put code u will understand more
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 code :

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


and css code :

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


so if code is like this everything is works but the thing is that it work only on radio button area and i want that it will work on whole image cuz they are linked with a css but when i tried to use a class like : .drinkcard-cc or other i got no result in place where should be hover text i got dot

Answer

Your mousemove event is bound to the <input> element, making it only fire when you mousemove on the actual radio button. jQuery, in a way, is 'stupid', it does not know it should also fire your function on a mousemove on the <label>, simply because you havn't told it to so.

Look at the following snippet, I changed your code to fit your needs:

$(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 Here's a fiddle, check it out. Also updated the js I just wrote, because the e.clientY-275 nad the e.clientX-330 made the <div> not visible on the screen.