html - 想要在 css3 中悬停另一个 div 时更改 div 的背景

Question

我想在将鼠标悬停在另一个 Div 上时更改 Div 的背景，我试过了

HTML5部分:

<nav>
<div id="nav1"></div>
<a href="#"><div id="nav2"></div></a>
<a href="#"><div id="nav3"></div></a>
<a href="#"><div id="nav4"></div></a>
<a href="#"><div id="nav5"></div></a>
<a href="#"><div id="nav6"></div></a>
<div id="nav7"></div>
</nav>
<article>
<div id="nav8"></div>
</article>

我试过的 CSS 是

#nav2
{
float:left;
height:429px;
width:34px;
background:url(images/nav_02.gif) no-repeat;
}
#nav2:hover #nav8
{
float:left;
height:429px;
width:445px;
background:url(images/nav_08-nav_02_over.jpg) no-repeat;
}

但是没用... 我只需要用 css 来做，没有 javascript ..

Answer 1

CSS 选择器的工作方式是 Parent > Descendant

当你做的时候

#nav2:hover #nav8

这意味着#nav8 是#nav2 的后代，在您的标记中不是这种情况，因此该规则不适用

你必须使用 javascript 来做你想做的事。