如何给HTML中使用的图像提供悬停效果？

-5

我附低于1 2个图像是简单和其他与悬停.I需要像上所述第二图像。任何1知道如何通过CSS来得到这种类型的悬停悬停橙色边框如何给HTML中使用的图像提供悬停效果？

下面

尹恩惠代码：

<div class="col-md-4 image-hover img-opacity"> 
    <img class="img-1" src="assets/images/img-1.png"> 
    <p>Lorem ipsum dummy text</p> 
</div>

来源

2017-04-05 user3784723

谷歌是你的朋友！ – Pedram

请参考[游览]（http://stackoverflow.com/tour），环顾四周，阅读[帮助中心]（http://stackoverflow.com/help），特别是[如何问个好问题？]（http://stackoverflow.com/help/how-to-ask）努力解决问题。如果遇到这样的特定问题，请发布一个包含所有相关代码的问题，说明什么不起作用，并解释您的研究到目前为止。 –

@pedram是否有可能悬停在这种类型的图像通过CSS或jQuery的？ – user3784723

试试这个。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.container { 
    position: relative; 
    width: 50%; 
} 

.image { 
    content:url("assets/images/img-1.png"); 
    opacity: 0.8; 
    display: block; 
    width: 100%; 
    height: auto; 
    transition: .5s ease; 
    backface-visibility: hidden; 
} 

.container:hover .image { 
    content:url("https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"); 
    opacity:2; 
} 

</style> 
</head> 
<body> 

<div class="container"> 
    <img class="image"> 
    <p>Lorem ipsum dummy text</p> 
</div> 

</body> 
</html>

来源

2017-04-05 08:21:08

非常感谢你的工作，但我也可以添加背景色与不透明度？ – user3784723

是的..Plz将此解决方案标记为已接受。 –

好吧，我会但请你也请让我知道如何在其中添加背景颜色 – user3784723

这里工作例如，注意.hover蜱与console.log但只有当您将鼠标悬停在图像上时，才会触发3210事件。

// Jquery 
 
$('.img-1').hover(function() { 
 
    // do stuff 
 
    console.log($(this).attr('src')); 
 
}); 
 

 
// pure javascript 
 

 
var img = document.querySelector('.img-1'); 
 

 
img.addEventListener('mouseover', function() { 
 
    // do stuff 
 
    
 
    //console.log('do stuff'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-4 image-hover img-opacity"> 
 
    <img class="img-1" src="http://loremflickr.com/320/240" /> 
 
    <p>Lorem ipsum dummy text</p> 
 
</div>

来源

2017-04-05 08:20:47 loelsonk

如何给HTML中使用的图像提供悬停效果？

回答

相关问题