jQuery 悬停选择器过滤器

Question

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

我想要实现的是，当我将鼠标悬停在“.box”时，会出现“.inside-box”，但我只想要我悬停在框中的那个，而不是所有的。

这是代码的简化版本。

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

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

.inside-box {
  display:none;
 }

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

Answer 1

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

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

.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;
}

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