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

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"); 正在将该类应用于您#preview div中的所有span 。 将鼠标悬停在另一个<li> ，所有span都将应用2个lbpv-something类。

为了解决这个问题，你可能分配一个id给每个span或使用CSS伪类像-nth-child()来指定span添加一个类。 但是，整个设置并不理想，并且有一种更简单的方法可以做到这一点。

现在，您正在以编程方式将一个类添加到span以切换display:none 。 但是，jQuery已经具有.show()和.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>