为什么我的悬停功能不能正常工作

Question

我正在为高中制作一个工作索引，我使用JQuery悬停函数，但它起作用了。你应该悬停在一个项目链接上，它会在一个使用CSS创建的框中显示一个小预览图片，悬停在链接上也会向用户显示你正在悬停在它上面，为文本添加一个黄色背景。它似乎在前两个左右的盘旋中起作用，然后就不起作用了。悬停的工作与背景颜色的变化，但在前两个左右的悬停预览图片只是停止显示在鼠标上。我不知道问题出在哪里。

这是我正在做的一个样本，自己测试一下，如果你把另一个与工作版本链接起来，那就太好了。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");将该类应用于您的#previewdiv中的所有span s。当您将鼠标悬停在另一个<li>上时，所有span s都得到2个lbpv-something类应用。

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

现在，您正在通过编程方式向span s添加一个类来切换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();
});

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