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悬停更改其他职业

回答

相关问题