为什么我的悬停功能无法正常工作？

Question

我正在为高中制作工作索引，我正在使用 JQuery 悬停功能，但它出现了问题。你应该将鼠标悬停在一个项目 link 上，它会在使用 CSS 创建的框中显示它的小预览图片，将鼠标悬停在 link 上也会显示你正在悬停的用户通过在文本中添加黄色背景来实现。它似乎适用于前两次左右的悬停，然后它就停止工作了。悬停在背景颜色变化的情况下一直有效，但在前两次左右悬停后，预览图片在鼠标悬停时停止显示。我不知道问题出在哪里。

这是我正在制作的示例，您自己测试一下，如果您 link 另一个有工作版本的，那就太好了。 JSFiddle

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2    /jquery.min.js"></script>

<div id="preview">
<span class="lbpv1">
<img src="http://placehold.it/200x150/066" width="200" height="150" />
</span>
<span class="lbpv2">
<img src="http://placehold.it/200x150/066" width="200" height="150" />
</span>
</div>

<li id="lb1">
<b> Lab #1 </b>
    <i> blooblooblop </i>
    </br></br>
</li>

<br />

<li id="lb2">
<b> Lab #2 </b>
    <i> bleepbleepbloop </i>
    </br></br>
</li>

CSS

#preview
{
   width: 200px; 
   height: 150px;
   position: fixed;
   top: 50px;
   right: 50px;
   background-color: #EEE;
   z-index: 2;
   box-shadow: 3px 3px 8px rgba(0,0,0,.4);
}

.lbpv1 img, .lbpv2 img
{
   display: none;
}

JavaScript

$(document).ready(function() {
$("#lb1").hover(function()
{
    $("#lb1").css("background-color", "yellow");
    $("#preview span").removeClass("lbpv1");
    }
    ,function()
    {
    $("#lb1").css("background-color", "transparent");
    $("#preview span").addClass("lbpv1");
});
$("#lb2").hover(function()
{
    $("#lb2").css("background-color", "yellow");
    $("#preview span").removeClass("lbpv2");
    }
    ,function()
    {
    $("#lb2").css("background-color", "transparent");
    $("#preview span").addClass("lbpv2");
});
});

Answer 1

这是因为您的 $("#preview span").addClass("lbpv1"); 正在将 class 应用于 #preview div 中的所有 span。当您将鼠标悬停在另一个 <li> 上时，所有 span 都会应用 2 lbpv-something class。

要解决此问题，您可以为每个 span 分配一个 id 或使用 CSS 伪 class 如 -nth-child() 来指定哪个 span 添加一个 class 到。但是，整个设置并不优雅，有一种更简单的方法可以做到这一点。

现在，您正在以编程方式将 class 添加到 span 以切换 display:none。但是，jQuery 已经有专门为此制作的 .show() 和 .hide() 函数。

所以你可以这样做：

$("#lb3").hover(function(){
    $("#lb3").css("background-color", "yellow");
    $("#preview span.lbpv3 img").show();
 }, function(){
    $("#lb3").css("background-color", "transparent");
    $("#preview span.lbpv3 img").hide();
});

forked JSFiddle

$(document).ready(function() {
  $("#lb1").hover(function() {
    $("#lb1").css("background-color", "yellow");
    $("#preview span.lbpv1 img").show();
  }, function() {
    $("#lb1").css("background-color", "transparent");
    $("#preview span.lbpv1 img").hide();
  });
  $("#lb2").hover(function() {
    $("#lb2").css("background-color", "yellow");
    $("#preview span.lbpv2 img").show();
  }, function() {
    $("#lb2").css("background-color", "transparent");
    $("#preview span.lbpv2 img").hide();
  });
  $("#lb3").hover(function() {
    $("#lb3").css("background-color", "yellow");
    $("#preview span.lbpv3 img").show();
  }, function() {
    $("#lb3").css("background-color", "transparent");
    $("#preview span.lbpv3 img").hide();
  });
  $("#lb4").hover(function() {
    $("#lb4").css("background-color", "yellow");
    $("#preview span.lbpv4 img").show();
  }, function() {
    $("#lb4").css("background-color", "transparent");
    $("#preview span.lbpv4 img").hide();
  });
  $("#lb5").hover(function() {
    $("#lb5").css("background-color", "yellow");
    $("#preview span.lbpv5 img").show();
  }, function() {
    $("#lb5").css("background-color", "transparent");
    $("#preview span.lbpv5 img").hide();
  });
});

#preview {
  width: 200px;
  height: 150px;
  position: fixed;
  top: 50px;
  right: 50px;
  background-color: #EEE;
  z-index: 2;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, .4);
}
.lbpv1 img,
.lbpv2 img,
.lbpv3 img,
.lbpv4 img,
.lbpv5 img {
  display: none;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="preview">
  <span class="lbpv1">
    <img src="http://placehold.it/200x150/066" width="200" height="150" />
</span>

  <span class="lbpv2">
    <img src="http://placehold.it/200x150/066" width="200" height="150" />
</span>

  <span class="lbpv3">
    <img src="http://placehold.it/200x150/066" width="200" height="150" />
</span>

  <span class="lbpv4">
    <img src="http://placehold.it/200x150/066" width="200" height="150" />
</span>

  <span class="lbpv5">
    <img src="http://placehold.it/200x150/066" width="200" height="150" />
</span>

</div>
<li id="lb1">
  <p><b> Lab #1 </b>
    <i> blooblooblop </i>
  </p>
</li>
<br />
<li id="lb2">
  <p><b> Lab #2 </b>
    <i> bleepbleepbloop </i>
  </p>
</li>
<br />
<li id="lb3">
  <p><b> Lab #3 </b>
    <i> blahdedah </i>
  </p>
</li>
<br />
<li id="lb4">
  <p><b> Lab #4 </b>
    <i> bloopblahbleep </i>
  </p>
</li>
<br />
<li id="lb5">
  <p><b> Lab #5 </b>
    <i> blahpbleepbloop </i>
  </p>
</li>

为什么我的悬停功能无法正常工作？

Why is my Hover Function not working Properly?

javascript

jquery

hover

HTML

CSS

JavaScript