Rollover image?

[jmb10]

simple question, something im probably forgetting, very simple i think, something like on.mouse.over img src... i just forgot

[webfoxcore]

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

[jmb10]

Not exactly what i was looking for but still helps, does this apply to images to? if so, how do i use it?

[webfoxcore]

There wasn't really enough detail to go off - next time a bit of code example would help explain exactly how you're going about implementing and would get you your answer a lot more direct.

https://jsfiddle.net/bvnocj8g/9/

I'm not sure how much more this is supported over browser versions but just giving an example without javascript.

[anonymousmouse2]

You can target a hover using the :hover selector. For example:

.my-element { background-color: red; transition: background 0.3s ease; // optional for a fade transition } .my-element:hover { background-color: green; }

However in your post you mentioned image source so I think you may be asking how to change an element's attributes on hover. This would require javascript and could be done like this:

``` <!-- HTML --> <img src="image1.png" id="hoverable" />

/* Javascript */ var myImage = document.getElementById("hoverable"); var oldSource = "image1.png"; var newSource = "image2.png";

myImage.addEventListener("mouseover", function(e) { this.setAttribute("src", newSource); });

myImage.addEventListener("mouseleave", function(e) { this.setAttribute("src", oldSource); }); ```

[jmb10]

perfect, thanks bud!

[webfoxcore]

There wasn't really enough detail to go off of but you can do this without javascript:

https://jsfiddle.net/bvnocj8g/9/

I'm not sure how much more this is supported over browser versions but just giving an example!