Question

我有一个图像，其内部边框的不透明度设置为.7和圆角，效果很好。唯一的问题是我需要为图像添加悬停状态。我试过了：悬停但似乎没什么用。

边框需要变蓝并带有png叠加。

HTML：

<div class="box" >  
<div class="imgWrap">
<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/6/19/1371640593241/Morris-the-cat-009.jpg" alt="product1"  >
</div>
</div>

CSS：

.box{
    width:191px; 
    background:#FCFBDF;  
    margin: 0 auto;  
} 


img{
     width:191px;
     height:191px;
     display:block;
     border-radius:50%;

}
.imgWrap{
    position:relative;

}
.imgWrap:after{
    content:"";
    position:absolute;
    top:0; bottom:0; left:0; right:0;
    opacity:0.5;
    border: 10px solid rgba(248, 248, 255, 0.7);
    border-radius:50%;
}

JS小提琴 http://jsfiddle.net/zangief007/52fFF/3/

Answer 1

我猜你试图像这样在图像上触发悬停状态：

img:hover{
    .. your code ...
}

但是因为它上面有一个伪元素，所以你永远不能悬停图像。

解决方法是在伪元素上触发悬停状态，如下所示：

.imgWrap:hover:after{
    border-color:blue;
    background: url('PATH TO YOUR IMAGE');
}

<强> DEMO

Answer 2

像这样添加鼠标悬停。

.imgWrap:hover{
    width:250px;
}

PS：我只是根据悬停调整宽度。但你可以在悬停时做任何你喜欢的事情。

希望这有帮助。

干杯！

Answer 3

编辑：假设您不需要使用cat修改图像，web-tiki的解决方案似乎更好。

我认为你可能不得不使用一些Javascript / Jquery，只要你不能直接触发鼠标悬停在图像上（因为上面有一些元素）。

这是一个例子。

$(".imgWrap").hover(function(){    
    $('img').toggleClass("imgHover");
    $('.imgWrap').toggleClass("imgHover");
    $('.box').toggleClass("imgHover");
});

.imgHover{
    width:300px;
    height:300px;
}

在你的JSFiddle中尝试这个。别忘了添加Jquery lib

http://jsfiddle.net/52fFF/11/

例如，我刚改变了Box，Circle和图像的大小。

CSS悬停图像

3 个答案: