CSS悬停更改其他类

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

但是这也会改变其他主菜单项，有人知道怎么做吗？提前感谢！

- Jay Wit

---

.menulink是li的子元素，您能展示一下HTML吗？ - Pekka

纯CSS3是一个选项吗？还是你也想支持CSS2兼容的浏览器？ - TNC

我还想为老浏览器使用CSS2。我将尝试编辑消息并将HTML放入其中。 - Jay Wit

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

- Kamyar

---

这个可以运行，但是它会改变所有的主菜单项，有没有一种方法只改变父级主菜单项？ - Jay Wit

@Jay：应该有更好的解决方案，但我现在能想到的是，您需要为父级主菜单项定义一个特定的类（在名为.mainmenulink的新类中复制CSS样式），然后使用 $('.mainmenulink').hover(...。 - Kamyar

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/

- Rito

---

我真的不太了解我该如何使用它，我对jQuery还比较陌生 :) - Jay Wit

抱歉，这里有一个详细的文档 http://api.jquery.com/hover/ ，只需将它粘贴在 jq 库 (http://jquery.com/) 之后并尝试使用。 - Rito

我了解jQuery的基础知识，包括hover，但你给的脚本没有起作用。我对父子属性还不熟悉。原帖中还有更多信息，非常感谢您的帮助！ - Jay Wit

Answer 3

无法使用纯CSS完成此操作。我猜您正在尝试使用CSS创建下拉菜单。您可能需要查看Suckerfish：

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

- Finbarr

---

谢谢您的回复，但我已经有了一个完美运行的JavaScript下拉菜单，我只想让主要项目在鼠标悬停在子项目上时拥有白色背景。这真的不可能吗？ - Jay Wit

Answer 4

我认为你想要做的是在浏览子菜单/子菜单时保持父级高亮。要实现这一点，您需要将悬停样式应用于 <li> 而不是 <a>。可以在 suckerfish演示之一 中看到此操作的示例。

- Marcel