CSS image link change on hover

Question

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    lt a href  http   twitter com me  title  Twitter link  gt   lt div id  twitterbird  class  sidebar-poster  gt  lt  div gt  lt  a gt   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  lt a gt  around a  lt div gt   However  if I switch to  lt span gt  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

User · Answer

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.

User · Answer

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

User · Answer

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    lt a href    class  myImage  gt  lt  ---- gt  lt  a gt         lt style gt         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         lt  style gt

User · Answer

You could do the following  without needing CSS      lt a href  ENTER DESTINATION URL  gt  lt img src  URL OF FIRST IMAGE SOURCE  onmouseover  this src  URL OF SECOND IMAGE SOURCE   onmouseout  this src  URL OF FIRST IMAGE SOURCE AGAIN     gt  lt  a gt    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

User · Answer

lt a href  http   twitter com me  class  twitterbird  title  Twitter link  gt  lt  a gt    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

User · Answer

lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt   lt title gt Change Image on Hover in CSS lt  title gt   lt style type  text css  gt       card           width  130px          height  195px          background  url     images pic jpg   no-repeat          margin  50px             card hover           background  url     images anotherpic jpg   no-repeat         lt  style gt   lt  head gt   lt body gt       lt div class  card  gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

That could be done with  lt a gt  only      twitterbird    display  block      convert   lt a gt  to  lt div gt      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

User · Answer

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    lt a href   settings  gt       lt img class  default  src  settings-default svg   gt       lt img class  hover  src  settings-hover svg   gt       lt span gt Settings lt  span gt   lt  a gt   a img hover       display  none    a img default       display  inherit    a hover img hover       display  inherit    a hover img default       display  none

[html] CSS: image link, change on hover

Examples related to html

Examples related to css