将鼠标悬停在一个元素上会改变另一个元素吗?
Hovering over one element changes another?
我在按钮中有一个图像。当用户将鼠标悬停在按钮上时,我希望图像反转颜色。我怎样才能做到这一点?
这是我目前的代码:
<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>
试试这个:
button:hover > img {
-webkit-filter: invert(100%);
filter: invert(100%);
}
我在按钮中有一个图像。当用户将鼠标悬停在按钮上时,我希望图像反转颜色。我怎样才能做到这一点?
这是我目前的代码:
<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>
试试这个:
button:hover > img {
-webkit-filter: invert(100%);
filter: invert(100%);
}