Смена изображения при наведении курсора

[Lutsk]

Есть такой код, где при наведении изображение меняется на другое (замена атрибута "src"):

<li>
	<a href="#">
		<img src="image.png" alt="" onmouseout="this.src='image.png'" onmouseover="this.src='image_hover.png'" />
	</a>
</li>

Как изменить его, чтоб "src" менялся при наведении на <li>?

[danik.js]

Я думаю вам нужно использовать css:

<style>
    li a{
        display: block;
        width: 20px;
        height: 20px;
        background: url(http://javascript.ru/forum/images/smilies/sad.gif) no-repeat;
        white-space: nowrap;
        text-indent: 100%;
    }
    li:hover a{
        background-image: url(http://javascript.ru/forum/images/smilies/tongue.gif)
    }
</style>
<ul>
    <li>
        <a href="#">Текст для SEO и прочих нужд</a>
    </li>
</ul>

[Lutsk]

danik.js, css я знаю. Мне надо именно то, что спросил. Смену атрибута src при ховере на родительский <li>.

[danik.js]

<li onmouseout="querySelector('img').src='image.png'" onmouseover="querySelector('img').src='image_hover.png'">
    <a href="#">
        <img src="image.png" alt="" />
    </a>
</li>

[Lutsk]

Во, вот это оно, спасибо! Плюс с меня, когда ресурс позволит!

[StartGames]

А как добавить этому действию анимацию?

[ksa]

А как добавить этому действию анимацию?

Переделать на спрайт
https://learn.javascript.ru/css-sprite
https://html5css.ru/css/css_image_sprites.php

И решить как все это потом "анимировать". Т.е. нужен некий сценарий того, что ты хочешь видеть в итоге на экране...