悬停在一个元素上会改变另一个元素？答案

【问题标题】：Hovering over one element changes another?悬停在一个元素上会改变另一个元素？
【发布时间】：2015-08-01 00:12:18
【问题描述】：

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

这是我目前的代码：

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

【问题讨论】：

标签： html css button hover

【解决方案1】：

试试这个：

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

JSFiddle Demo

【讨论】：