CSS擬似クラスのホバープロパティー

Question

マウスを背景画像上に置くか、divにマウスを置くと、テキストの色を「白」に変更しようとしています。私はこれにはPseudoクラスの組み合わせを使用しなければならないことを知っていますが、それは分かりません。それは私が知っている非常にシンプルなものになるはずです。

ここにコードがあります。

.bigbox { 
 
border-bottom: 6px solid #00a37a; 
 
    position:relative; 
 
    
 

 
} 
 
.bigbox:hover { 
 
    border-bottom: 6px solid #ee5630; 
 
    
 
} 
 

 
.h2title { 
 
padding-left:70px; 
 
    margin-top:200px; 
 
    position:absolute; 
 
    z-index:11; 
 
    color:black; 
 
    text-decoration:none; 
 
    
 
} 
 

 
.img2 { 
 
    opacity:0.2; 
 
    margin-bottom:5px; 
 
} 
 

 
.img2:hover { 
 
    opacity:0.9; 
 
    margin-bottom:5px; 
 
} 
 

 
.img2 + h2title:hover { 
 
    color:white; 
 
}

<div class="bigbox"> 
 
    <a class="h2title" href="#"> <h2> Some Text</h2></a> 
 
    <center> 
 
     <img class ="img2" src="http://www.adweek.com/files/imagecache/node-blog/blogs/istock-unfinished-business-hed-2015.jpg" /> 
 
    </center> 
 
</div>

Answer 1

あなたは.bigbox divの上でホバリングを検出した場合、あなたはDIVの子孫のスタイルを簡単に適用することができます。

.img2 { 
 
    /*simplified for this demo*/ 
 
    opacity:0.2; 
 
} 
 
.h2title { 
 
    /*simplified for this demo*/ 
 
    position: absolute; 
 
    z-index: 11; 
 
    color:black; 
 
    margin: 50px; 
 
    text-decoration:none; 
 
} 
 

 
.bigbox:hover .img2 { 
 
    opacity:0.9; 
 
} 
 

 
.bigbox:hover .h2title { 
 
    color:white; 
 
}

<div class="bigbox"><a class="h2title" href="#"> <h2>Some Text on this guy's head</h2></a> 
 
    <img class ="img2" src="http://www.adweek.com/files/imagecache/node-blog/blogs/istock-unfinished-business-hed-2015.jpg" /> 
 
</div>

Answer 2

ない "前の兄弟" セレクタがありません。 h2タグを白色にするには、Steven Manuelソリューションを使用します。

関連するは、一般的な後続兄弟（要素がこの後に来ることを意味しますが、必ずしも直後ではないことを意味します）であり、CSS3セレクタです。 +は次の兄弟用でCSS2.1です。 Is there a “previous sibling” CSS selector?とcss3_gen_sibling

上

詳細はこちらCSSセレクタ前の兄弟のための私のデモを確認してください：https://jsfiddle.net/x7kqveky/

は、このヘルプを願っています。

Answer 3

試してみてください。

.a:hover + .b { 
 
    color: red; 
 
}

<div class="a">First Div</div> 
 
<div class="b">Second Div</div>