CODEWITHSUNDEEP
htmlcssbuttonhover
Ernest
Ernest

Reputation: 98

Hovering over one element changes another?

I have an image inside a button. I would like the image to invert colors when the user hovers over the button. How can I do this?

This is the code I have so far:

     <button type="button" onclick="getLocation()" style="margin-right:5px;" class="r26">
     <img class="imgl" src="http://cdn.flaticon.com/png/256/60534.png" style="position: relative;
top:50%; margin-right: 6px; margin-left:-2px;" width="10px">
            <font style="position: relative; top:50%;">Detect Country</font></button>

Upvotes: 2

Views: 128

Answers (1)

imbondbaby
imbondbaby

Reputation: 6411

Try this:

button:hover > img {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

JSFiddle Demo

Upvotes: 1

Related Questions