想要在css3中悬停另一个div时更改div的背景 [英] Want to change the background of an div on hovering another div in css3

问题描述

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>
<文章>
< 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 ..

解决方案

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





$ p $ ＃nav2：hover＃nav8


这意味着＃nav8是＃nav2的后代，它不是在你的标记中，这个规则不适用

I Want to change the background of a Div when Hovering over another Div and i tried

HTML5 part:

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

And the CSS i tried is

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

But it is not working ... I need to do it with css only no javascript ..

解决方案

The way CSS selectors works is Parent > Descendant

When you do

#nav2:hover #nav8

It means that #nav8 is a descendant of #nav2, which is not the case in your markup, so the rule does not apply

You have to use javascript to do what you're after.

这篇关于想要在css3中悬停另一个div时更改div的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！