如何在jQuery中選擇：#menu ul li：hover> ul？

如何在jQuery中選擇相當於#menu ul li:hover > ul？如何在jQuery中選擇：#menu ul li：hover> ul？

我想改變一個框的顏色時，懸停僅在li TARGET

有關詳細信息，請參閱：http://jsfiddle.net/wGbwX/18/

2012-10-10 Gilles Vauvarin

不要使用jQuery的CSS。普通的CSS在每種情況下都更快更順暢。 –

你是說當你將鼠標懸停在''上時，文字爲'TARGET'，你想要觸發懸停事件嗎？你的問題不是很清楚，你得到了很多答案，因爲人們猜測你的意思，所以這些答案看起來並不那麼正確。如果這是你想要的，那麼只需在''上添加一個類並執行'$（「。className」）。hover（）' – Archer

對不起，我的英語有點基本。我只是說，每當我將鼠標懸停在#menu ul li：懸停但只有一個ul子項（=子菜單）時，我想觸發懸停事件。 –

試試這個：

$('#menu ul:first > li > a')

更新fiddle。

來源

2012-10-10 11:01:35

你可以將鼠標懸停嵌套UI的父：

$('#menu ul > li >ul').parent().hover

編輯，以反映使用選擇嵌套裏的

更新JS小提琴pebbl的recomendation：http://jsfiddle.net/wGbwX/23/

來源

2012-10-10 11:02:21 Joel

+1似乎正是OP想要的:)如果是我，儘管我也會使用子選擇器 - 只是爲了避免嵌套問題 - 所以'$（「＃menu ul> li> ul」）。parent （）' – Pebbl

是的\ 0 /它可能是我的解決方案。謝謝大家的幫助:-) –

我會在'＃menu'後加一個'>'$'（「＃menu> ul> li> ul」）''。由於此解決方案仍然可能導致嵌套問題。（如果有3個或更多'ul'嵌套在其他內部） – Dan

我想這樣的作品：

但只針對jQuery的1.4和更高

$（「＃menu ul li ul li」）。hover（function（）{}）;

來源

2012-10-10 11:02:26

由於您TARGET處於a標籤，你可以使用以下命令：

$('#menu > ul > li > a')

的>是選擇每個父母的直接子。然後最後綁定a標記上的懸停事件而不是li。

在選擇器中使用所有這些>的原因是，選擇器不會選擇位於目標li內的a標記。

編輯：

由於HOME鏈接不應觸發懸停事件，您可以使用下列之一：
^{雙方將選擇相同的項目，但邏輯是不同的。}

$('#menu>ul>li:gt(0) > a')

jsfiddle。
這將使用:gt選擇器。

$('#menu>ul>li:not(:first) > a')

jsfiddle。
雖然這是:first和:not的組合。的jsfiddle。

編輯2：
好對不起，現在我才明白問題的要求。

Joel's solution作品，但如果你想要做這件事的選擇，你可以做到以下幾點：

$('#menu > ul > li:has(ul) > a')

jsfiddle。
這將使用:has選擇器。我傾向於更喜歡這種解決方案，因爲如果我稍後需要返回此代碼或其他人想要查看代碼時，通過閱讀它可以輕鬆理解選擇器的目標。

我選擇anchor一個list item它包含一個unordered list，等裏面......

來源

2012-10-10 11:02:44 Dan

是的，但在您的示例中，懸停事件在所有li（Home和TARGET）上觸發。我只是想用立即ul孩子（TARGET）而不是其他（主頁） –

@GillesVauvarin觸發li上的懸停事件我已經更新了答案。 – Dan

這正是我想要的，但問題是，我不知道事先知道這將有一個孩子。（我爲客戶使用CMS）它可能是第一個，但它可能是另一個。 –

試試這個demo

$('#menu ul li a').hover(

    function(e) { 
     change = $(this).parent().find(".sub-nav").length; 
     if(change) 
     { 
     $('.toto').css({'background-color':'#cccccc'}); 
     } 

    }, 
    function() { $('.toto').css({'background-color':'#f8f8f8'}); } 
);

來源

2012-10-10 11:11:20 Champ

如何在jQuery中選擇：#menu ul li：hover> ul？

回答

相關問題