CSS悬停不起作用

Question

I'm quite new to HTML and CSS and I know this is probably a very dumb question but I've been trying to solve it for a while and I can't figure out what's wrong. 我对HTML和CSS还是很陌生，我知道这可能是一个非常愚蠢的问题，但是一段时间以来我一直在试图解决它，但我不知道出了什么问题。

I want one div to change its backgound-color when the mouse enters another element not related to it (when the div is the child of the other component it works fine). 我希望一个div在鼠标输入与它无关的另一个元素时更改其背景色（当div是另一个组件的子元素时，它可以正常工作）。

My HTML: 我的HTML：

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

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

And the CSS: 和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;
}

I've tried changing the "nav:hover div" rule for something like "nav:hover body > div" but it doesn't work either... 我尝试将“ nav：hover div”规则更改为“ nav：hover body> div”，但它也不起作用...

Thank you in advance for your help. 预先感谢您的帮助。

Answer 1

Use the adjacent sibling selector + : 使用相邻的兄弟选择器 + ：

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

jsFiddle example jsFiddle示例

The rule you had tried, nav:hover div , was looking for divs that were descendants of a nav. 您尝试的规则nav:hover div一直在寻找属于nav后代的div。 You wanted the sibling. 你想要兄弟姐妹。

CSS悬停不起作用

问题描述

1 个解决方案

解决方案1
7 已采纳 2014-04-23 20:54:24

CSS悬停不起作用

问题描述

1 个解决方案

解决方案1 7 已采纳 2014-04-23 20:54:24

解决方案1
7 已采纳 2014-04-23 20:54:24