2

我有如下代码：

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

任何的想法？

4

5 回答 5

3

使用 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;
}
于 2013-05-10T19:30:10.947 回答
1

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

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

于 2013-05-10T19:21:16.813 回答
1 
$("#active").mouseenter(function () {
    $("#mainNav").css("background-color", "#333");
});

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

$("#active").mouseleave(function () {
    $("#mainNav").css("background-color", "#ABC" /*some other color*/);
});
于 2013-05-10T19:23:54.877 回答
1

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

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

<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 ...
}
于 2013-05-10T19:24:52.720 回答
1

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);
    }
})();
于 2013-05-10T19:25:25.707 回答