Question

我想知道如何从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”混合到一些COLLSION DETECTION的原因中。我希望当鼠标悬停在“关于我们”时，“悬停的css执行”执行“

Answer 1

如果这两个元素是兄弟姐妹，则可以使用adjacent sibling combinator，例如

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

或者，如果元素是兄弟姐妹而不是直接兄弟姐妹，则可以使用general sibling combinator：

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

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

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

根据您的评论进行修改：“但我只想更改<p>的颜色。你能为我做这件事吗？”

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

Answer 2

嗯，这有点棘手。 Css目前没有前往Dom，只有DOWN the Dom。如果您正在向下旅行，您可以简单地将+用于相邻的兄弟姐妹，或者〜用于一般兄弟姐妹选择器。

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

http://jsfiddle.net/LGQMJ/

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

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

HTML CSS从另一个DIV控制DIV

2 个答案: