Question

我有一个如下代码：

<nav id="mainNav" class="">
   <div id="navContainer">
       <div id="active">
           [ some list ]
       </div><!-- #active -->
   </div><!-- #navContainer -->
</nav><!-- #mainNav -->

我想在用户悬停在#active时更改#mainNav的背景颜色，但我不知道该怎么做。我这样做了没有结果：

#active:hover #mainNav{
   background-color: #333;
}

任何想法？

Answer 1

使用JS或尝试其他方法，仅限CSS ：

http://jsfiddle.net/coma/zxybD/5/

<强> HTML

<div id="main">
    <a href="#" class="red">red</a>
    <a href="#" class="green">green</a>
    <a href="#" class="blue">blue</a>
    <div></div>
</div>

<强> CSS

#main {
    position: relative;
}

#main > a {
    display: block;
    padding: .5em;
}

#main > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #eee;
    z-index: -1;
}

#main > a.red:hover ~ div {
    background-color: red;
}

#main > a.green:hover ~ div {
    background-color: green;
}

#main > a.blue:hover ~ div {
    background-color: blue;
}

Answer 2

正如One Trick Pony评论的那样，纯CSS中没有父选择器（至少还没有）。如果要选择父级，则必须通过不同类型的选择器（需要了解DOM结构）或通过Javascript之类的方式来执行此操作。

在Javascript中，您可以在元素上使用.parentNode来获取其父级。如果您有jQuery，可以致电.parent()。

Answer 3

$("#active").mouseenter(function () {
    $("#mainNav").css("background-color", "#333");
});

不要忘记在鼠标离开时更改它。

$("#active").mouseleave(function () {
    $("#mainNav").css("background-color", "#ABC" /*some other color*/);
});

Answer 4

由于无法拥有CSS父选择器，我建议您重新考虑您的设计。

当div为id =“active”作为子项时，将类名active添加到父div，并根据需要设置.active类的样式：

<nav id="mainNav" class="{if child active print 'active'}">
   <div id="navContainer">
       <div id="active">
           [ some list ]
       </div><!-- #active -->
   </div><!-- #navContainer -->
</nav><!-- #mainNav -->

根据您使用的语言，您可以完成此任务。

#mainNav.active:hover #active{
   ... your hover properties ...
}

Answer 5

CSS4定义了一个“主题”运算符，允许您执行此操作：

!#mainNav #active:hover { background-color:#333 }

但是，据我所知，目前还没有浏览器支持此功能。相反，您可以使用此JavaScript：

(function() {
    var nav = document.getElementById('mainNav'), active = document.getElementById('active'),
        f = function(e) {
            e = e || window.event;
            nav.style.backgroundColor = e.type.match(/mouseover/) ? "#333" : "";
        };
    if( window.addEventListener) {
        active.addEventListener("mouseover",f,false);
        active.addEventListener("mouseout",f,false);
    }
    else {
        active.attachEvent("onmouseover",f);
        active.attachEvent("onmouseout",f);
    }
})();

如何选择父标签？

5 个答案: