Наведение одного элемента на другой элемент?

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