JQuery每個和方法不工作

目標很簡單。當懸停在mydiv（灰色）時，內部的子div應該出現。我正在嘗試爲此編寫代碼，但我可以提出的最好方法是顯示所有內部div。只有孩子的內部div應該出現。請幫我這個代碼，我將不勝感激，謝謝:)JQuery每個和方法不工作

https://jsfiddle.net/wyeqgfjz/#&togetherjs=6wNtokkegm

HTML：

<div class="mydiv"> 
    <div class="inner"></div> 
</div> 

<div class="mydiv"> 
    <div class="inner"></div> 
</div>

CSS：

.mydiv { 
    background: #ccc; 
    padding: 40px; 
    margin-bottom: 40px; 
} 

.inner { 
    background: red; 
    padding: 40px; 
}

的jQuery：

var inner = $('.mydiv .inner'), 
    mydiv = $('.mydiv'); 
inner.hide(); 
mydiv.each(function() { 
    $(this).on('hover', function() { 
    $(this).find(inner).toggle(); 
    }); 
});

來源

2017-07-24 Yogo. Sh

沒有hover事件，您想要的事件是mouseenter和mouseleave。
但是，jQuery有一個hover()方法，它爲你組合了事件。

請注意，您不必使用循環，jQuery會在您的內部進行迭代。

var inner = $('.mydiv .inner'), 
 
    mydiv = $('.mydiv'); 
 
    
 
inner.hide(); 
 

 
mydiv.hover(function() { 
 
    $(this).find(inner).toggle(); 
 
});

.mydiv { 
 
    background: #ccc; 
 
    padding: 40px; 
 
    margin-bottom: 40px; 
 
} 
 

 
.inner { 
 
    background: red; 
 
    padding: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mydiv"> 
 
    <div class="inner"></div> 
 
</div> 
 

 
<div class="mydiv"> 
 
    <div class="inner"></div> 
 
</div>

來源

2017-07-24 19:26:23 adeneo

用CSS可以單獨完成） – empiric

@empiric - 確實如此，jQuery有一些神奇的功能來過濾它看起來很像的集合。 – adeneo

因爲最初的選擇器，我不確定。在遇到奇怪的副作用的情況下記住這一點可能是件好事 – empiric

無需使用腳本這在所有。【示例】（https://jsfiddle.net/uqmkzykw/：通過使用變量`inner`會在這種情況下實際工作使用:hover僞選擇

.mydiv { 
 
    background: #ccc; 
 
    padding: 40px; 
 
    margin-bottom: 40px; 
 
} 
 

 
.inner { 
 
    background: red; 
 
    padding: 40px; 
 
    display:none; 
 
} 
 

 
.mydiv:hover .inner { 
 
    display:block 
 
}

<div class="mydiv"> 
 
    <div class="inner"></div> 
 
</div> 
 

 
<div class="mydiv"> 
 
    <div class="inner"></div> 
 
</div>

來源

2017-07-24 19:34:46 charlietfl

JQuery每個和方法不工作

回答

相關問題