Изменить изображение onmouseover и onmouseout

Question

Я пишу с php, я хочу сделать простое изменение изображения при наведении на него. Я использую этот код:

echo '<li class="'.$icon['footer_social_icon'].'">
        <img src="../wp-content/uploads/img1.png"
        onmouseover="this.src="../wp-content/uploads/img2.png";"
        onmouseout="this.src="../wp-content/uploads/img1.png";"/>
    </li></ul>';

Я не знаю, почему это не работает!

Answer 1

Посмотрите на цитаты

onmouseover="this.src="../wp-content/uploads/img2.png";"

Вот почему это не удается. Вы должны использовать экранированные одинарные кавычки, так как вы используете php для вывода HTML

onmouseover="this.src=\'../wp-content/uploads/img2.png\';"

Answer 2

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

в CSS сделайте следующее:

.icon {
      background-image: url('/the-name-of-your-image.png');
      width: 100px; /* width of your image */
      height: 100px; /* height of your image */
}
.icon:hover {
      background-image: url('/the-image-when-you=hover.png');
}

Ваш HTML будет выглядеть примерно так:

<li class="icon"></li>

Когда кто-то наводит указатель мыши на элемент LI, CSS изменит изображение на изображение в значке: hover, а затем, когда вы уберете мышь с элемента LI, оно вернется к исходному.

Answer 3

Ответ epascarello, вероятно, добьется цели.

Вы также можете разместить оба изображения как отдельные изображения в li и изменить их с помощью CSS.

echo '<li class="'.$icon['footer_social_icon'].'">
    <img src="../wp-content/uploads/img1.png" class="img1" />
    <img src="../wp-content/uploads/img2.png" class="img2" />
</li></ul>';

CSS:

.img2 {
    display: none;
}

li:hover .img1 {
    display:none;
}

li:hover .img2 {
    display: inline; /* Or block, whichever you prefer */
}

Этот способ также будет работать на компьютерах без JavaScript.