css - 悬停时更改图像链接的颜色

Question

我有一张图片是一个链接:

我的 HTML 看起来像:

       <div class="imgholder">
         <a href="#" title="Home" class="imglink"><img src="/images/img1.JPG" alt="Image"  class="img-responsive" id="electricone"> </a>

           <div class="item1">
             <h1 class="slickfont1">Home</h1>
           </div>       
       </div>

我知道这看起来是个简单的问题，但是什么是最佳样式图像链接，以便在您悬停时它变得更暗？

是否最好在链接周围做一个 li 并使用 li:hover 设置样式？还是最好为实际的 div 或 实际链接设置样式？我的 CSS 会是什么样子？

Answer 1

为您的 A 元素提供背景颜色，
比 .imglink:hover img{ } 处理图像不透明度

一个例子是:

DEMO

a.imglink{
  background:         #000;
  display:            inline-block;
}
a.imglink img{
  vertical-align:     middle;
  transition:         opacity 0.3s;
  -webkit-transition: opacity 0.3s;
}
a.imglink:hover img{
  opacity:            0.5;
}