jQuery悬停选择器筛选器

Question

我试图找出这jQuery文档，但我没有把它整理出来。

我想要实现的是，当我悬停“.box”时，出现“.inside-box”，但我只想要悬停在盒子里面的那个，而不是全部。

这是代码的简化版本。

jQuery(document).ready(function($) { 
 
     $(".box").hover(
 
     \t $("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元素将不具有高度/宽度。这意味着它们不可能导致它们上的事件，因为它们在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>