Question

当我将鼠标悬停在某个对象上时，有没有办法更改其他对象的类？当我将鼠标悬停在子菜单上时，菜单项必须更改。我有;

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', '');
    });

但是这会改变其他主菜单项目。谁知道怎么样？提前谢谢！

Answer 1

我不认为使用纯CSS是可能的。我建议使用jQuery。你可以使用jQuery轻松完成：

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

Answer 2

在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/

Answer 3

无法用纯css做到这一点。我猜你正在尝试用css做下拉列表。你可能想看看suckerfish：

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

Answer 4

我认为您要做的是在浏览子菜单/子菜单时保持父级突出显示。为此，您需要将悬停样式应用于<li>，而不是<a>。在one of the suckerfish demos中可以看到这种情况的一个例子。

CSS悬停改变其他类

4 个答案: