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伪类悬停属性

回答

相关问题