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来完成你所追求的目标。

Answer 2

这是不可能的。您可以在悬停它时更改div本身的背景和任何子div，但是使用兄弟姐妹/父兄妹/完全不相关的元素 - 没办法。

然而，您可以在jQuery中执行此操作。

示例：

$("#nav2").mouseover(function() { 
    $("#nav8").addClass("someClassName");
});
$("#nav2").mouseout(function() { 
    $("#nav8").removeClass("someClassName");
});

然后将该背景图像连接到＃nav8.someClassName。

Answer 3

使用此Jquery代码：

<script type="text/javascript">
$(document).ready(function(){
$("#nav2").hover(function(){

    $("#nav8").css("background-image","url(images/nav_08-nav_02_over.jpg)");
    },function(){
    $("#nav8").css("background-image","");
});
});
</script>

Answer 4

你无法在CSS3中为相同级别的标签添加效果。在悬停父标记时，只有子标记可以具有不同的CSS。

Answer 5

除非你的div是兄弟姐妹，否则你是不可能的，所以你可以用

来达到效果

+ adjacent siblings selectors（css2）或
~ general siblings combinator（css3）

e.g。如果您的标记是以这种方式构建的

<div id="nav1"></div>
<div id="nav2"></div>
...
<div id="nav9"></div>

您可以将一些样式应用于nav2将nav1悬停在

#nav1:hover + #nav2 { ... }

因为nav2是nav1的直接（相邻）兄弟（在这种情况下+或~具有相同的效果），或者您可以在nav9 hovering {上执行相同操作{1}}与

nav1

（此处您只能使用#nav1:hover ~ #nav9 { ... }选择器。）另请注意，这些选择器适用于所有现代浏览器，包括Internet Explorer 7+，请参阅http://html5please.us/#gtie6

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

5 个答案: