1

CSSでDIVを別のDIVから変更する方法を知りたい

つまり: 2 つの div があり、マウスが 1 つの div の上にあるときに、他の DIV の CSS を変更したい

ありがとうございます

HTML :

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

「ABOUT US」と「li a」をいくつかの COLLSION DETECTION の REASON とマウスでブレンドしたいと考えています。マウスが「私たちについて、「li a hover's css execute」をホバーすると、

4

2 に答える 2

3

2 つの要素が兄弟である場合、隣接する兄弟コンビネータを使用できます。

<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 に答える