0

I am trying to give hover effect, but can't understand how to give it. I am doing like this simple method, i don't know much about the hover effects.

HTML:

<div class="social">    
            <ul>
                <li><a href="#"><img src="http://i.imgur.com/nHJ6Loa.png" alt="facebook" class="fbhover"></a></li>

        </ul>

CSS for facebook icon:

.fbhover:hover {
    background-image:url(http://i.imgur.com/bdMNHnw.png);
    background-repeat:no-repeat;
}
user3152357
  • 107
  • 1
  • 3
  • 8
  • Seems to work fine http://jsfiddle.net/j08691/x38DL/. Unless you want to replace the image. – j08691 Jan 15 '14 at 16:38

6 Answers6

0

You can't replace a <img> element with a background image. Then, you can:

  • [Demo] Use a <img> element and change its src attribute using onmouseover and onmouseout events. I don't like this solution because I think it should be done CSS only.
  • [Demo] Don't use any <img> element. Instead, use an empty element, and style it with a background-image that you change on hover. I don't like this solution because in your case, your images aren't decorative.
  • [Demo] Use a <img> with the default image. When you hover a wrapping element, hide the image and style the wrapping element with a background-image. I choose this solution.

Demo

HTML:

<ul>
    <li><a href="#" class="fbhover"><img src="http://i.imgur.com/nHJ6Loa.png" alt="facebook" /></a>
    </li>
</ul>

CSS:

.fbhover{
    display: inline-block;
}
.fbhover:hover {
    background-image:url(http://i.imgur.com/bdMNHnw.png);
    background-repeat:no-repeat;
}
.fbhover:hover > img{
    visibility: hidden;
}
Oriol
  • 274,082
  • 63
  • 437
  • 513
0

The <img> element doesn't use the background-image CSS attribute, so you should use a <div> to achieve this effect instead. Try changing your HTML to this:

<ul>
    <li><a href="#"><div class="fbhover"></div></a></li>
</ul>

And then, change your CSS to this:

.fbhover {
    display: inline-block;
    width: 26px;
    height: 27px;
    background: url('http://i.imgur.com/nHJ6Loa.png') no-repeat 0 0;
}

.fbhover:hover {
    background-image: url('http://i.imgur.com/bdMNHnw.png');
}

See a demo here.

Keep in mind that the two images you're using are of different dimensions. The "default" one is 26 pixels wide by 27 pixels tall, while the "hover" one is 24px x 25px. So you'll see a slight shift in the image's position when hovering.

theftprevention
  • 5,083
  • 3
  • 18
  • 31
0

You can't switch the source of an image using css, but you can affect the background-image, so you would need to set up, say a div element with your starting background-image first, then switch that using css.

See CSS: Change image src on img:hover for an example.

Community
  • 1
  • 1
Raad
  • 4,540
  • 2
  • 24
  • 41
0

You need to give width and height to the image on hover. here is a demo 

.fbhover:hover {
http://l2.yimg.com/ts/api/res/1.2/_QJTbkK9JEp2XwjwJcoMEg--/YXBwaWQ9eWhvbWVydW47cT04NTtzbT0xO3c9MjUwO2g9MTQx/http://media.zenfs.com/en-US/video/video.abcnewsplus.com/49e95f54ffbd408cb1b752a69899014d);
    background-repeat:no-repeat;
    height:300px;
    width:300px;
}
user3123529
  • 112
  • 5
  • Your solution isn't valid CSS. And asker wants to change the image, not change its size. – Oriol Jan 15 '14 at 16:50
0

Make a div (with the proper size) with the image as the background (and give it an id or class). Then, in your CSS, just use the hover event to do whatever you want.

Roemer
  • 1,336
  • 1
  • 15
  • 39
0

Finally, I have tried this method and it also worked.

<div class="social">    
            <ul>
                <li class="facebook"><a href="#"></a></li>

        </ul>                               
            </div>


.social li.facebook {
    background-image:url(img/facebook.png);
    background-repeat:no-repeat;
    width:27px;
    cursor:pointer;
}

.social li.facebook:hover {
    background-image:url(img/facebookhover.png);
    background-repeat:no-repeat;
}
user3152357
  • 107
  • 1
  • 3
  • 8