CSS懸停更改其他職業

當我將鼠標懸停在對象上時，是否有方法更改其他對象的類別？當我將鼠標懸停在子菜單上時，菜單項必須更改。我有;CSS懸停更改其他職業

ul.menu .menulink { 
    padding:0px 13px 0px; 
    height:23px; 
    font-weight:bold; 
    width:auto; 
} 
ul.menu ul li:hover .menulink{ 
    color:#002d36; 
    background-image:none; 
    background-color:#ffffff; 
}

HTML;

<ul class="menu" id="menu"> 
    <li> 
     <a href="#" class="menulink"><span>Main menu item</span></a> 
     <ul> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </li> 
</ul>

我也試過jQuery;

$('ul.menu ul li').mouseover(function(){ 
     $('.menulink').css('color', '#002d36'); 
     $('.menulink').css('background-color', '#ffffff'); 
    }); 
    $('ul.menu ul li').mouseout(function(){ 
     $('.menulink').css('color', ''); 
     $('.menulink').css('background-color', ''); 
    });

但是，藏漢改變其他主菜單項目.. 任何人都知道怎麼樣？在此先感謝！

來源

2011-02-24 Jay Wit

什麼是'.menulink'，li的子元素？你也可以顯示HTML嗎？ – 2011-02-24 09:58:54

純粹是CSS3的一個選項？或者你也想做CSS2兼容的瀏覽器？ – TNC 2011-02-24 10:12:02

我也想爲舊瀏覽器使用CSS2。我會嘗試編輯郵件並將html放入郵件中 – 2011-02-24 10:54:47

在css中你不能選擇對象向後。我昨天在jq上寫了一個腳本，應該有所幫助。

$('.menu ul li').hover(function() { 
    $(this).parent('ul').parent('li').find('a.menulink').css('color', '#002d36'); 
}, 
function(){ 
    $(this).parent('ul').parent('li').find('a.menulink').css('color', '#F00'); 
});

編輯：

這工作得很好： http://jsfiddle.net/YBJHP/

來源

2011-02-24 10:10:10 Rito

我不太瞭解我應該如何使用它，我很新jQuery :) – 2011-02-24 10:21:31

對不起，繼承人詳細文檔 http://api.jquery.com/hover/ 只是將它粘貼在jq lib（http://jquery.com/）之後並試用它 – Rito 2011-02-24 12:10:37

我知道jQuery的基礎知識，懸停也是，但你給的腳本沒有工作。我是新來的父母和孩子的屬性。原始帖子中有更多的信息，非常感謝幫助！ – 2011-02-24 12:37:22

沒辦法用純css來做。我猜你正在嘗試用css做下拉菜單。你可能想看看口魚：

http://htmldog.com/articles/suckerfish/dropdowns/

來源

2011-02-24 09:59:23 Finbarr

感謝您的回覆，但我已經有了一個完美的JavaScript下拉菜單，我只希望主項目在懸停在子菜單上時具有白色背景，項目。這真的不可能嗎？ – 2011-02-24 10:02:31

我不認爲這是可能通過使用純CSS。我建議使用jQuery。你可以很容易地使用jQuery：

$('.menulink').hover( 
    function(){ 
     $(this).css('background-color', '#New-Color-In-HEX'); 
    }, 
    function(){ 
     $(this).css('background-color', '#Old-Color-In-HEX'); 
    } 
);

來源

2011-02-24 10:04:58 Kamyar

這是有效的，但它改變了所有mainmenu項目，有沒有辦法只改變父mainmenu項目？ – 2011-02-24 10:22:00

@Jay：應該有更好的解決方案，但我現在可以想到的是，您必須爲您的父級主菜單項定義特定的類。（在一個名爲'.mainmenulink'的新類中複製css樣式）並使用'$（'。mainmenulink'.hover（...' – Kamyar 2011-02-24 14:08:53

我認爲你正在試圖做的是保持父強調，你通過一個子菜單/子菜單導航。要達到此目的，您需要將懸停樣式應用於<li>而不是<a>。在行動中的一個例子可以在one of the suckerfish demos中看到。

來源

2011-02-24 10:15:07 Marcel

CSS懸停更改其他職業

回答

相關問題