小编del*_*lco的帖子

CSS 悬停时更改另一个元素

我的 CSS 有问题。当我将鼠标悬停在另一个元素上时,我想更改元素。它有效,但并不完美。我的代码:HTML

<ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>
Run Code Online (Sandbox Code Playgroud)

CSS:

.navbar-inverse .navbar-nav > .active > a {
    color:#fff;
}

.navbar-inverse .navbar-nav > li > a:hover {
    color:#fff;
}

.navbar-inverse .navbar-nav > li:not(.active):hover ~ .active > a {
    color:#D4D4D4;
}
Run Code Online (Sandbox Code Playgroud)

.active正如我所说,它可以工作,但如果在悬停元素之前则不起作用。示例:当“Contact”为 时它有效,.active但当 Home 为 时它不起作用.active。如何让它发挥作用?

html css twitter-bootstrap

3
推荐指数
1
解决办法
1万
查看次数

标签 统计

css ×1

html ×1

twitter-bootstrap ×1