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

【问题标题】：Want to change the background of an div on hovering another div in css3想要在css3中悬停另一个div时更改div的背景
【发布时间】：2012-01-25 10:36:35
【问题描述】：

我想在将鼠标悬停在另一个 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 ..

【问题讨论】：

您的 HTML 看起来很可疑。您可能应该使用更像<ul><li id="nav1"><a href="#"></a></li> .. </ul> 的东西。更改您的 HTML 是一种选择吗？看起来您应该使用CSS sprite，而不是单独的导航图像。

标签： html css hover

【解决方案1】：

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

当你这样做时

#nav2:hover #nav8

这意味着#nav8是#nav2的后代，你的标记中不是这种情况，所以规则不适用

你必须使用 javascript 来做你所追求的。

【讨论】：

谢谢你，我很困惑！是否有可能做这样的事情。

【解决方案2】：

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

但是，您可以在 jQuery 中执行此操作。

例子：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

+adjacent siblings selectors (css2) 或
~ general siblings combinator (css3)

例如如果你的标记是以这种方式构造的

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

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

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

因为 nav2 是 nav1 的直接（相邻）兄弟（在这种情况下，+ 或 ~ 会产生相同的效果），或者您可以在 nav9 上执行相同操作，将 nav1 悬停在

#nav1:hover ~ #nav9 { ... }

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

【讨论】：

谢谢，但问题是他们不是兄弟姐妹。
@Princeyesuraj 你能把每个 div id 移到它的父链接吗？
不，我不能。这将导致更多的复杂性，因为这只是代码的一部分。我只是在用 CSS3 练习 HTML5，并尽量减少 JavaScript 的使用。