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会将图像更改为图标中的图像：悬停，然后当您将鼠标移离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的计算机。

更改图像onmouseover和onmouseout

3 个答案: