CSS: image link, change on hover
HtmlCssHtml Problem Overview
I have an image that is a link. I want to show a different image when the user hovers over the link.
Currently I'm using this code:
<a href="http://twitter.com/me" title="Twitter link">
<div id="twitterbird" class="sidebar-poster"></div></a>
div.sidebar-poster {
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
}
#twitterbird {
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
But I'm having loads of problems: the div isn't picking up the CSS rules (the element just isn't showing the related CSS rules when I view it in Firebug).
Perhaps this is because (as I know) this is invalid HTML: you can't put an <a> around a <div>. However, if I switch to <span> then it seems I get bigger problems, because you can't set a height and width on a span reliably.
Help! How can I do this better?
Html Solutions
Solution 1 - Html
<a href="http://twitter.com/me" class="twitterbird" title="Twitter link"></a>
use a class for the link itself and forget the div
.twitterbird {
margin-bottom: 10px;
width: 160px;
height:160px;
display:block;
background:transparent url('twitterbird.png') center top no-repeat;
}
.twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
Solution 2 - Html
If you have just a few places where you wish to create this effect, you can use the following html code that requires no css. Just insert it.
<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF IMAGE ON HOVER GOES HERE'"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE AGAIN'" /></A>
Be sure to write the quote marks exactly as they are here, or it will not work.
Solution 3 - Html
The problem with changing it via JavaScript or CSS is that if you have a slower connection, the image will take a second to change to the hovered version. This will cause an undesirable flash as one disappears while the other downloads.
What I've done before is have two images. Then hide and show each depending on the hover state. This will allow for a clean switch between the two images.
<a href="/settings">
<img class="default" src="settings-default.svg"/>
<img class="hover" src="settings-hover.svg"/>
<span>Settings</span>
</a>
a img.hover {
display: none;
}
a img.default {
display: inherit;
}
a:hover img.hover {
display: inherit;
}
a:hover img.default {
display: none;
}
Solution 4 - Html
That could be done with <a> only:
http://twitter.com/me" title="Twitter link" id="twitterbird" class="sidebar-poster">
#twitterbird {
display: block; /* 'convert' <a> to <div> */
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
height: 160px;
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
Solution 5 - Html
It can be better if you set the a element in this way
display:block;
and then by css sprites set your over background
Edit: check this example out http://jsfiddle.net/steweb/dTwtk/
Solution 6 - Html
You could do the following, without needing CSS...
<a href="ENTER_DESTINATION_URL"><img src="URL_OF_FIRST_IMAGE_SOURCE" onmouseover="this.src='URL_OF_SECOND_IMAGE_SOURCE'" onmouseout="this.src='URL_OF_FIRST_IMAGE_SOURCE_AGAIN'" /></a>
Example: https://jsfiddle.net/jord8on/k1zsfqyk/
This solution was PERFECT for my needs! I found this solution here.
Disclaimer: Having a solution that is possible without CSS is important to me because I design content on the Jive-x cloud community platform which does not give us access to global CSS.
Solution 7 - Html
If you give generally give a span the property display:block, it'll then behave like a div, i.e you can set width and height.
You can also skip the div or span and just set the a the to display: block and apply the backgound style to it.
<a href="" class="myImage"><!----></a>
<style>
.myImage {display: block; width: 160px; height: 20px; margin:0 0 10px 0; background: url(image.png) center top no-repeat;}
.myImage:hover{background-image(image_hover.png);}
</style>
Solution 8 - Html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover in CSS</title>
<style type="text/css">
.card {
width: 130px;
height: 195px;
background: url("../images/pic.jpg") no-repeat;
margin: 50px;
}
.card:hover {
background: url("../images/anotherpic.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>