Question

我是HTML和CSS的新手，我知道这可能是一个非常愚蠢的问题，但我一直试图解决它一段时间，我无法弄清楚出了什么问题。

当鼠标进入与其无关的另一个元素时，我想要一个div来改变它的背景颜色（当div是另一个组件的子元素时，它工作正常）。

我的HTML：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <nav>

    </nav>
<div></div>
</body>
</html>

CSS：

* {
    margin: 0px;
    padding: 0px;
}

nav {
    width: 100%;
    height: 50px;
    background-color: black;
}

div {
    width: 100%;
    height: 40px;
    background-color: green;
    position: absolute;
    left: 500px;
}

 nav:hover div {
    background-color: blue;
}

我尝试更改“nav：hover div”规则，例如“nav：hover body＆gt; div”，但它不起作用......

提前感谢您的帮助。

Answer 1

使用adjacent sibling selector +：

nav:hover + div {
    background-color: blue;
}

<强> jsFiddle example

您尝试过的规则nav:hover div正在寻找属于导航后代的div。你想要兄弟姐妹。

CSS悬停不起作用

1 个答案: