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>