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

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

目前，您正在以编程方式向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>

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

HTML

CSS

的JavaScript

1 个答案: