【问题标题】:How to get an image to fade in when the mouse is hovered over?鼠标悬停时如何使图像淡入?
【发布时间】:2017-05-04 03:42:28
【问题描述】:

我收到了这条提示:

.container img{
     width:125px;
     margin;0;
     padding:0;
     opacity:0.5;
}
.container img:hover{
   opacity:1;
} 

试过了,效果很好!

然后我使用了一个轻量版的自定义 CSS 编辑器插件 - 将代码弹出到其中并将类容器 <p class="container"> 添加到图像中,它就可以工作了。

【问题讨论】:

  • 研究使用transition
  • 您的问题不包括对您的问题的详细描述、任何以前的尝试、任何现有代码或进一步的信息,以及字数不多。但它确实包含一个链接 - 这可能是垃圾邮件的边界。
  • 感谢您的所有努力 - 抱歉 缺乏信息。下次发帖时我会提供更好的细节。与此同时,Anuja Agarwal 为我提供了可以与之合作的信息——比你还多。悬崖

标签: css filter onhover


【解决方案1】:

您可以为图像使用 opacity 属性:

.container img{
  width:300px;
  margin;0;
  padding:0;
  opacity:0.5;
}
.container img:hover{
  opacity:1;
}
<div class="container">
  <img src="http://www.booths.co.uk/wp-content/uploads/640px-X-360px-Chocolate-MiniNests.jpg"/>
</div>

【讨论】:

    猜你喜欢
    • 2018-03-26
    • 1970-01-01
    • 2012-08-31
    • 2011-09-26
    • 1970-01-01
    • 2011-01-25
    • 1970-01-01
    • 2015-04-06
    • 2011-07-05
    相关资源
    最近更新 更多