Question

我试图在jQuery文档中找到这个，但我还没有解决它。

我想要实现的是当我在盘旋时＃34; .box＆＃34; ＆＃34; .inside-box＆＃34;出现了，但我只想要盒子里面的那个我悬停而不是全部。

这是代码的简化版本。

＆＃13;

    jQuery(document).ready(function($) {
        $(".box").hover(
        	$("this").filter($(".inside-box")).toggle();
        );
    });

＆＃13;

.box {
  display:inline-block;
  width:30%;
  margin-left:20px;
  background-color:gray;
  color:white;
 }

.inside-box {
  display:none;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">
   <div class="inside-box">hi</div>
</div>

<div class="box">
   <div class="inside-box">hi</div>
</div>

<div class="box">
   <div class="inside-box">hi</div>
</div>

＆＃13;

Answer 1

首先，您的JS语法不正确，因为hover()事件处理程序需要放在匿名函数中。此外，如果.inside-box元素被隐藏，.box元素将没有高度/宽度。这意味着它们不可能在它们上引起hover事件，因为它们在DOM中不占用空间。要解决此问题，您需要在CSS中设置height或min-height，或在.inside-box元素之外提供一些默认内容。

要实现悬停切换，您根本不需要使用任何JS代码。您可以在CSS中使用：hover`伪选择器，如下所示：

＆＃13;

.box {
  display: inline-block;
  width: 30%;
  margin-left: 20px;
  background-color: gray;
  color: white;
  border: 1ps solid red;
}
.inside-box {
  display: none;
}
.box:hover .inside-box {
  display: block;
}

＆＃13;

<div class="box">a
  <div class="inside-box">hi</div>
</div>

<div class="box">b
  <div class="inside-box">hi</div>
</div>

<div class="box">c
  <div class="inside-box">hi</div>
</div>

＆＃13;

jQuery悬停选择器过滤器

1 个答案: