Смена изображения при наведении курсора
Есть такой код, где при наведении изображение меняется на другое (замена атрибута "src"):
<li> <a href="#"> <img src="image.png" alt="" onmouseout="this.src='image.png'" onmouseover="this.src='image_hover.png'" /> </a> </li> Как изменить его, чтоб "src" менялся при наведении на <li>? |
Я думаю вам нужно использовать 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>
|
danik.js, css я знаю. Мне надо именно то, что спросил. Смену атрибута src при ховере на родительский <li>.
|
<li onmouseout="querySelector('img').src='image.png'" onmouseover="querySelector('img').src='image_hover.png'">
<a href="#">
<img src="image.png" alt="" />
</a>
</li>
|
Во, вот это оно, спасибо! Плюс с меня, когда ресурс позволит!
|
А как добавить этому действию анимацию?
|
Цитата:
https://learn.javascript.ru/css-sprite https://html5css.ru/css/css_image_sprites.php И решить как все это потом "анимировать". Т.е. нужен некий сценарий того, что ты хочешь видеть в итоге на экране... |
| Часовой пояс GMT +3, время: 17:14. |