html - 将鼠标悬停在一个元素上会改变另一个元素吗？

Question

我在按钮中有一个图像。当用户将鼠标悬停在按钮上时，我希望图像反转颜色。我怎样才能做到这一点？

这是我目前的代码:

     <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>

Answer 1

试试这个:

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

JSFiddle Demo