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链接但是当我尝试使用像.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();
    });

 });

修改

https://jsfiddle.net/ssc1kpmj/1这是一个小提琴，请查看。还更新了我刚写的js，因为e.clientY-275和e.clientX-330使<div>在屏幕上不可见。

jQuery + CSS文本显示不起作用

1 个答案: