изменение цвета цвета при наведении курсора в html

Question

Как я могу изменить цвет изображения при наведении на него html? Я думал использовать отдельную картинку с цветом в качестве наведения, но как именно я это написал?

Answer 1

HTML:

<img class="myPic" src="http://emjaywebdesigns.com/wp-content/uploads/2011/07/web_binary-300x237.jpg" /> 

CSS:

img.myPic { 
    filter: none; 
    -webkit-filter: grayscale(0); 
} 

img.myPic:hover { 
    filter: url(filters.svg#grayscale); 
    filter: gray; 
    -webkit-filter: grayscale(1); 
} 

DEMO.

Или вы можете использовать различные изображения при наведении курсора мыши, т.е.

.myPic { 
    background:url('path/to/image/image_normal.png') no-repeat; 
} 

.myPic:hover { 
    background:url('path/to/image/image_hovered.png') no-repeat 
} 

Google before you ask.