CSS僞類懸停屬性

我試圖將鼠標懸停在背景圖像上或當它在div上徘徊時，將文本的顏色更改爲「白色」。我知道，我不得不使用Pseudo類組合，但只是無法弄清楚。它的確很簡單，我知道。CSS僞類懸停屬性

這是代碼。

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

來源

2016-07-15 Sunil Patel

如果您發現該.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>

來源

2016-07-15 02:01:56

沒有「以前的兄弟」選擇。爲了讓h2標籤變成白色，您可以使用Steven Manuel解決方案。

在相關說明中，~適用於一般繼承者兄弟（意味着元素在此之後，但不一定在之後），並且是CSS3選擇器。 +是用於下一個兄弟，並且是CSS2.1。在Is there a 「previous sibling」 CSS selector?

更多細節及css3_gen_sibling

檢查我的CSS選擇前一個兄弟在這裏演示：https://jsfiddle.net/x7kqveky/

希望這有助於。

來源

2016-07-15 02:18:35

嘗試類似這樣的東西。

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

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

來源

2016-07-15 05:36:16

CSS僞類懸停屬性

回答

相關問題