悬停时更改图像颜色

Question

我有这个图像，我使用z-index在图像上放置一个框和文本： 这是它的样子：

使用此代码完成了这项工作：

#wrap {
    position:relative; 
    width: 200px;  
    height: 145px;
    border: 1px solid grey
}



#text {
    z-index: 100;
    position: absolute;    
    color: white;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.7);
}

并调用函数：

<div id="wrap">
    <img src="/wp-content/uploads/2014/03/brandslang.png"/>
    <div id="text">Brand</div>
</div>

此图像等将用作链接，所以基本上我想在用户将鼠标悬停在图像上时向用户提供某种响应，基本上我想让用户在整个图像上覆盖这样的用户像这样盘旋它：

我看了a：悬停，但我不确定如何实现它所以它只会影响这个图像，而不是我在页面上的每一个链接，这就是我希望你们的地方可以帮助我！ ：）

Answer 1

您可以使用一些css3选项。这样你就不必改变你的html了。 adeneo的小提琴使用另一个元素，您可以使用:before

模仿该行为

#wrap:hover:before{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    content : " ";
}
#wrap:hover #text{
    background: none;
}

http://jsfiddle.net/TY8fc/1/

Answer 2

他所说的但是正确的悬停级别：http://jsfiddle.net/83N5X/1/

<div id="wrap">
    <img src="http://www.rhpreventie.nl/media/catalog/product/cache/1/image/1200x1200/9df78eab33525d08d6e5fb8d27136e95/b/r/brandslanghaspel-25-meter-19-mm.png" height="145"/>
    <div id="text">Brand</div>
    <div class="cover"></div>
</div>

.cover {
    height: 101px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.7);
    display:none;
}

Answer 3

将图像包裹在标签中。将display属性设置为inline-block将使div获取图像的尺寸。

http://jsfiddle.net/Q43fN/25/show
http://jsfiddle.net/Q43fN/25/

 #wrap {
 position:relative;
 border:1px solid gray;
 display:inline-block;
}

#wrap a {
 position:relative;
 display:inline-block;
}

#wrap a:after {
    content:'';
    position:absolute;
    height:100%;
    width:100%;
    background:rgba(0,0,0,0.7);
    left:0;
    visibility:hidden;
    z-index:1;
}

#wrap a:hover:after {
    visibility:visible;
}

#text {
    z-index:100;
    position:absolute;
    color:#fff;
    font-size:20px;
    font-weight:700;
    padding:10px;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.7)
}
#wrap a:hover #text {
   background-color: transparent;
}

Answer 4

这是一个动画（javascript）http://jsfiddle.net/83N5X/2/

$("#wrap").hover(function(){
    $(".cover").animate({"top": "0px"});
}, function(){
    $(".cover").css({"top": "101px"});
});


.cover {
    position: absolute;
    top: 101px;
    left: 0;
    right: 0;    
    bottom: 44px;
    background: rgba(0,0,0,.7);
    display:none;

}

#wrap:hover .cover {
    display:block;    
}