更改图像onmouseover和onmouseout

问题描述：

I'm coding with php, I want to make a simple image change when hovering on it. I'm using this code:

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>';

I don't know why it doesn't work!

我正在使用php进行编码，我希望在将鼠标悬停在其上时进行简单的图像更改。我正在使用此代码： p>

  echo'＆lt; li class =“'。$ icon ['footer_social_icon']。'”＆gt; 
＆lt; img src =  “../wp-content/uploads/img1.png"
 onmouseover =”this.src =“../ wp-content / uploads / img2.png”;“
 onmouseout =”this.src =“。  ./wp-content/uploads/img1.png";"/>
＆lt; / li＆gt;＆lt; / ul＆gt;'; 
  code>  pre> 
 
 我不喜欢 不知道为什么它不起作用！ p> 
  div>

答

Look at the quotes

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

That is why it fails. You need to use escaped single quotes since you are using php to output the HTML

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

答

epascarello's answer will probably do the trick.

You can also place both images as separate images in the li, and change them with 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 */
}

This way will also work on computers without javascript.

答

A better approach might be to just use CSS because you don't have to worry too much about coding.

in CSS do the following:

.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');
}

Your HTML would look something like this:

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

When someone moves their mouse over the LI element CSS will change the image to the one in the icon:hover, and then when you move the mouse off the LI element it will revert back to it's original.

更改图像onmouseover和onmouseout

相关推荐