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：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;
}

Answer 2

使用伪类

.imglink { normal styling }
.imglink:hover { background-color: (change background color); color: (change font color) }

如果您想要更改图像本身，您需要将其设置为背景图像并将其换出或使用jquery更改src

Answer 3

HTML

<div class="imgholder">
  <a href="#" title="Home" class="imglink">
    <img src="http://www.cancer-fund.org/images/share/diy/img_sample.gif" alt="Image"  class="img-responsive" id="electricone">
   </a>

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

        </div>
    </div>

<强>的CS

.imglink

{
   background-color:blue; 
}
.imglink:hover
{
    background-color:red;
 }

.imglink:hover .img-responsive
{
    opacity:0.4;

}

Demo

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

3 个答案: