jQuery的兄弟姐妹從

模擬CSS懸停我有一個菜單，具有以下內在張力結構jQuery的兄弟姐妹從

<li> 
    <a href="#">Menu item</a> 
    <span></span> 
</li>

當有人將鼠標懸停在鏈接背景改變顏色，並與跨度同樣的情況，每個項目。

我想要發生的事情是，當某人懸停在跨度上時，它也模擬兄弟標籤的css懸停規則。

我可以使用下面的目標錨元素，我嘗試使用mouseenter函數，但這並沒有給我希望的效果。

$('#menu li span').mouseover(function() { 

    $(this).siblings('a').mouseenter(); 

});

我該如何得到這個工作？

謝謝

來源

2011-05-20 ianckc

您可能正在尋找['.trigger（）']（http://api.jquery.com/trigger/）。但是我不得不問，爲什麼不用一個簡單的CSS規則來完成這件事？ 'li：把一個{新的樣式放在這裏}'JS對我來說似乎有點矯枉過正。 – 2011-05-20 14:03:37

說實話，重新考慮你的標記可能會更好。如果跨度確實需要，那麼可能是將它放在A標籤內部的情況，從而解決了這個問題。 – amustill 2011-05-20 14:05:49

我需要鏈接獨立行事，如果它是徘徊。但是，如果跨度盤旋，則需要將其顯示爲鏈接的一部分。跨度激活了一個下拉菜單，因此需要它。 – ianckc 2011-05-20 14:14:42

爲什麼你不只是把一個css懸停在李？

li:hover{ 

}

來源

2011-05-20 14:03:43 Burt

鏈接標記將用戶帶到頁面。量程操作一個下拉菜單。這就是爲什麼我希望鏈接可以獨立於跨度更改背景顏色的原因。 – ianckc 2011-05-20 14:12:05

爲什麼不把懸停放在裏面？

li:hover a { change... 
li:hover span { change...

來源

2011-05-20 14:03:54 corymathews

儘管它在視覺上表明它確實如此，但並不能使「span」可點擊。 – jeroen 2011-05-20 14:12:07

雖然實際上OP並沒有要求... – jeroen 2011-05-20 14:12:55

也許我錯了，但我認爲他只是想要懸停狀態，當一個標籤懸停以激活跨度盤旋狀態以及。 – corymathews 2011-05-20 14:24:02

有一些解決方案，例如：

您可以將跨度移至內部鏈接，並給它一個display:block所以纔出現在其下方（that's我會做什麼，這是最簡單的解決方案）;
您可以使用jquery獲取所有鏈接的href，並將它們添加爲鏈接/點擊li。

對於第二個解決方案，我會用（準備文件，未經測試）類似：

$("#menu li a").each(function() { 
    href = $(this).attr("href"); 
    $(this).parent().click(function() { 
    window.location = href; 
    }); 
});

編輯：根據您的意見，我建議：

HTML

<li> 
    <a href="#">Menu item<span></span></a> 
</li>

css

a:hover { 
    // for link 
} 
a:hover span { 
    // for a and span 
} 
a span:hover { 
    // for span 
}

而在jQuery中，您使用event.preventDefault()取消點擊a span。

來源

2011-05-20 14:04:06 jeroen

感謝您的建議。當鏈接仍然作爲鏈接工作時，我需要保持單獨的元素 – ianckc 2011-05-20 15:40:15

@ user330936並非如此，如果訪問者點擊了跨度，則可以取消JavaScript中的鏈接，請參閱我的編輯的最後一行。 – jeroen 2011-05-20 15:42:06

簡單地將您的mouseenter函數中的代碼粘貼到一個單獨的函數中並調用它。例如：

$('#menu li span').mouseover(function() { 
    doMouseEnter($(this).siblings('a')); 
}); 

function doMouseEnter(element) { 
    ... 
}

來源

2011-05-20 14:04:21

jQuery的兄弟姐妹從

回答

相關問題