Changing the color of an image link on hover

问题:

I have an image that is a link:

My HTML looks like:

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

I know this seems like a simple question, but what is the best way to style the image link so that it becomes darker when you :hover?

Is it best to do an li around the link and style that with li:hover? Or is it best to style the actual div or actual link? What would my css look like?

回答1:

Give a background color to your A element,
than on .imglink:hover img{ } handle the image opacity

An example would be:

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

回答2:

Use pseudo classes

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

If you want to change the image itself you will either need to set it as a background image and swap it out or use jquery to change the src

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

CSs

.imglink

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

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

}

Demo