我有一个图像,其内部边框的不透明度设置为.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%;
}
答案 0 :(得分:3)
我猜你试图像这样在图像上触发悬停状态:
img:hover{
.. your code ...
}
但是因为它上面有一个伪元素,所以你永远不能悬停图像。
解决方法是在伪元素上触发悬停状态,如下所示:
.imgWrap:hover:after{
border-color:blue;
background: url('PATH TO YOUR IMAGE');
}
<强> DEMO 强>
答案 1 :(得分:0)
像这样添加鼠标悬停。
.imgWrap:hover{
width:250px;
}
PS:我只是根据悬停调整宽度。但你可以在悬停时做任何你喜欢的事情。
希望这有帮助。
干杯!
答案 2 :(得分:0)
编辑:假设您不需要使用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
例如,我刚改变了Box,Circle和图像的大小。