1

我想知道如何从 CSS 中的另一个 DIV 更改一个 DIV

我的意思是：我有 2 个 div，当鼠标超过 1 个 div 时，我想更改另一个 DIV 的 CSS

谢谢

HMTL：

<li id="aboutUs">
 <a>
  <div id="icon"></div><h1>ABOUT US</h1>
  <p id="nav">
     A bit about us, jackpots, good gaming & join the community
  </p>
 </a>
</li>

CSS：

#aboutUs{
float:left;
border-right: 1px solid rgb(231, 231, 231);
border-bottom: 3px solid rgb(231, 231, 231); /* gray color */
height: 78px;
padding-top: 20px;
margin-right: 10px;
margin-bottom:10px;
vertical-align: top;
min-height: 62px;
padding-left: 10px;
padding-right: 10px;
color:#808080; /* #808080; */
cursor: pointer;
}

#aboutUs:hover{
border-bottom: 3px solid rgb(86, 126, 1); /* green color */
}

li a{
color:#808080; /* Color 2 */
}

li a:hover{
color: #000000; /* Color 1 */
}

我想将“关于我们”和“li a”用于某些碰撞检测的原因与鼠标混合。我希望当鼠标悬停在“关于我们”时，“li a hover's css execute”

4

2 回答 2

3

如果这两个元素是兄弟，您可以使用相邻的兄弟组合器，例如

<div></div>
<div></div>

div {
background: slategray;
height: 5em;
width: 5em;
}

div + div {
background: lightgray;
}

div:hover + div {
background: peru;
border-radius: 10px 50px / 20px;
}

http://jsfiddle.net/b5fgT/1/

或者，如果元素是兄弟而不是直接兄弟，则可以使用通用兄弟组合器：

http://jsfiddle.net/b5fgT/3/

您还可以在将鼠标悬停在其父元素上时设置后代元素的样式：

div:hover > div {
/* CSS */
}

根据您的评论进行编辑：“但我想改变<p>唯一的颜色。你能为我做吗？”

那么在这种情况下你可以使用：#aboutUs:hover p {color: red;}- http://jsfiddle.net/mpa5k/1

于 2013-06-13T16:03:38.003 回答
0

嗯，这有点棘手。Css 当前不向上移动 Dom，仅向下移动 Dom。如果您正在旅行，您可以简单地将 + 用于相邻的兄弟姐妹，或使用 ~ 用于一般兄弟姐妹选择器。

或者，您可以给它们相同的类名并使用 :not:hover 伪类。在这里查看这个小提琴：

http://jsfiddle.net/LGQMJ/

div:not(:hover) span.question {
    opacity: 0; 
}
div:hover span.question {
    opacity: 1;
}

如果我能看到您的 HTML 结构，我可以为您提供更多帮助。

于 2013-06-13T16:06:16.563 回答