如何在html中使用的图像上赋予悬停效果？答案

【问题标题】：How to give hover effect on the image used in html?如何在html中使用的图像上赋予悬停效果？
【发布时间】：2017-04-05 19:46:32
【问题描述】：

我在 1 下面附上了 2 张图片很简单，其他是带有悬停的。我需要像第二张图片一样悬停的橙色边框。任何 1 都知道如何通过 css 提供这种类型的悬停

以下代码：

<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>

【问题讨论】：

谷歌是你的朋友！
请带上tour，四处看看，通读help center，尤其是How do I ask a good question?，努力解决问题。如果您在这样做时遇到了特定问题，请在您的尝试中发布问题（包括所有相关代码），说明什么不起作用，并解释您迄今为止的研究。
@pedram 是否可以通过 css 或 jquery 将鼠标悬停在此类图像上？
@user3784723 Google 仍然是你的朋友（线索：是的）。
@user3784723 css -> img:hover {} 和 jquery -> $('img').hover(function(){}

标签： javascript jquery html css

【解决方案1】：

试试这个。

<!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>

【讨论】：

非常感谢它的工作，但我也可以添加不透明度的背景颜色吗？
好的，但请告诉我如何在其中添加背景颜色

【解决方案2】：

这是一个工作示例，注意 .hover 与 console.log 打勾，但 mouseover 事件仅在您将鼠标悬停在图像上时触发一次。

// 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>

【讨论】：