How to change source of tag on hover?

by

With only html and css, its not posible to change the src of image. If you do replace the img tag with div tag, then you might be able to change the image that is set as the background as like 

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

And if you think you can use some javascript code then you should be able to change the src of the img tag as below

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}
<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

More Related Contents:

  1. How to change the color of text?
  2. My Website is Mirror-flipped on iPhone Devices
  3. Fill SVG path element with a background-image
  4. Equal height columns with CSS
  5. How to replicate background-attachment fixed on iOS [duplicate]
  6. How to customize ?
  7. Invert CSS font-color depending on background-color
  8. Heights rendering differently in Chrome and Firefox [duplicate]
  9. White space at bottom of anchor tag
  10. Cross-browser custom styling for file upload button [duplicate]
  11. Position: sticky buttons not working in IE 11
  12. Changing Underline color
  13. css “left” not working
  14. Using .otf fonts on web browsers
  15. What makes the text on a element vertically centered?
  16. How to hide drop down arrow in IE8 & IE9?
  17. How to center the contents of a div [duplicate]
  18. difference between width auto and width 100 percent
  19. Change the color of a bullet in a html list?
  20. Font awesome is not showing icon
  21. CSS wrong appearance of border-radius on a nested div
  22. How to make a border overlay child div?
  23. How to make the web page height to fit screen height
  24. Inverted Scooped corners using CSS
  25. Why does the ‘title’ attribute cause browsers to ignore my styles?
  26. transition for background-image in firefox?
  27. CSS Layout 2-Column fixed-fluid [closed]
  28. Bootstrap – Fill fluid container between header and footer
  29. Change image on hover
  30. Why does a border increase the element’s width?

Leave a Comment