改变孩子的父母？

Question

在CSS中你可以这样做：

nav:hover a {

但是当nav悬停时，有没有办法更改a？

Answer 1

使用javascript事件onHover

在jquery中，它就是这样的：

$("a").hover(function () {
    $('#nav').css("color","red");
 });

Answer 2

即将推出CSS

选择器中的显式主题将在CSS中出现，但我们将不得不等待一段时间。很快，您将能够明确声明哪个元素是主题，例如使用您的代码：

$nav a:hover {
    background: red;
}

这将改变导航的背景，以便在其任何锚点后代悬停时进行读取。

来源：选择者等级4»Determining the Subject of a Selector

在实现之前，您必须使用JavaScript（或使用它构建的工具之一，例如jQuery，Mootools等）来完成这样的任务。

使用jQuery

您可以使用jQuery完成此操作，方法是在悬停或退出任何嵌套锚点时添加和删除类：

$("nav").on("mouseenter mouseleave", "a", function(e){
    $(e.delegateTarget).toggleClass("hovered", e.type === "mouseenter" );
});​

演示：http://jsfiddle.net/jonathansampson/EPRRy/1/

Answer 3

这是最兼容的方式

 $("a").hover(function () { 
    $(this).parent().css({color:"red"}); 
 }); 

Answer 4

没有办法用CSS提升元素。要明确地做你所描述的，它需要一些JS。

@ssx让它接近，但并不完全，做你要求的JS（我将简化和使用jQuery）。

$("nav a:hover").hover(function() {
  $(this).parent().css({'color': 'red'});
}), function() {
  $(this).parent().css({'color': 'black'})
});

这会改变要读取的颜色，然后在悬停失去焦点时返回黑色。

Answer 5

CSS 2中没有解决方案（不了解CSS 3）。

Javascript解决方案很容易并且由其他成员回答。

你可以试试LESS。使用LESS，您可以在DOM上执行一些条件样式。

Answer 6

很快将在CSS 4中引入。这是我今天看到的第5或第6个问题。我认为应该很快就会被浏览器厂商实施。