我想讓它當你將滑鼠懸停在下拉選單中的一個專案上時，除了你懸停在一個專案上的專案之外的所有專案都會改變顏色。為了獲得這種效果，我嘗試在 JQuery 中使用 .not() 選擇器，但我不確定如何選擇特定的子元素（h1在這種情況下）。
我嘗試寫作.not(this).以及.not(children)......他們沒有奏效。請參閱 JQuery 代碼。
<div>
<h1>Lorem</h1>
<div class="dropdown">
<a href="#">111</a>
<a href="#">222</a>
<a href="#">333</a>
</div>
</div>
<div>
<h1>Ipsum</h1>
<div class="dropdown">
<a href="#">111</a>
<a href="#">222</a>
<a href="#">333</a>
</div>
</div>
<div>
<h1>Dolor</h1>
<div class="dropdown">
<a href="#">111</a>
<a href="#">222</a>
<a href="#">333</a>
</div>
</div>
查詢：
$(function() {
$('div').mouseenter(
function() {
$(this).find('.dropdown').slideDown(300);
$('h1').css({
'color': '#808080'
});
});
$('div').mouseleave(
function() {
$(this).find('.dropdown').slideUp(300);
$('h1').css({
'color': 'white'
});
});
});
uj5u.com熱心網友回復：
如果我理解你的問題是正確的，試試這個：
$(function () {
$('div').mouseenter(
function () {
$(this).find('.dropdown').slideDown(300);
$('h1').not(this).css({ 'color': '#808080' });
$(this).find('h1').css({ 'color': 'white' });
});
$('div').mouseleave(
function () {
$(this).find('.dropdown').slideUp(300);
$('h1').css({ 'color': 'white' });
});
});
uj5u.com熱心網友回復：
考慮以下。
$(function() {
$('div').hover(
function(event) {
var siblings = $("div").not(this);
$('.dropdown', siblings).slideDown(300);
$('h1', siblings).css({
'color': '#808080'
});
},
function() {
var siblings = $("div").not(this);
$('.dropdown', siblings).slideUp(300);
$('h1', siblings).css({
'color': 'white'
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<h1>Lorem</h1>
<div class="dropdown">
<a href="#">111</a>
<a href="#">222</a>
<a href="#">333</a>
</div>
</div>
<div>
<h1>Ipsum</h1>
<div class="dropdown">
<a href="#">111</a>
<a href="#">222</a>
<a href="#">333</a>
</div>
</div>
<div>
<h1>Dolor</h1>
<div class="dropdown">
<a href="#">111</a>
<a href="#">222</a>
<a href="#">333</a>
</div>
</div>這僅在第一個hover事件之后按預期作業。我們使用相同的選擇器，然后this從組中洗掉。現在這些專案按預期運行。
查看更多：
- https://api.jquery.com/hover/
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/334936.html