html - 从孩子改变父母？

Question

在 CSS 中，您可以这样做：

nav:hover a {

但是有没有办法改变nav什么时候a悬停？

score 2 · Accepted Answer

使用 javascript 事件onHover

在 jquery 中，它是这样的：

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

score 1 · Accepted Answer

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

$nav a:hover {
    background: red;
}

这将更改导航的背景以在其任何锚后代悬停时读取。

资料来源：Selectors Level 4 »确定选择器的主题

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

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

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

score 0 · Accepted Answer

这是最兼容的方式

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

score 0 · Accepted Answer

不，没有办法使用 CSS 提升元素。要明确执行您所描述的操作，需要一些 JS。

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

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

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

score 0 · Accepted Answer

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

Javascript 解决方案很简单，并由其他成员回答。

你可以试试LESS。使用 LESS 你可以在 DOM 上做一些条件样式。

score 0 · Accepted Answer

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

6 回答 6