Question

我正在尝试在悬停时更改图像。我尝试了很多方法但没有任何工作。我必须使用这样的东西。如果这个代码有问题请告诉我。在此先感谢

代码

    <a href = "https://my-website.com/results/testimonials-global-supply-chain-group/">
    <img id = "home-button" alt = "" src = "https://my-website.com/wp-content/uploads/2017/11/businessman-2606509_1920_20171107090703313.jpg" 
     onmouseover="$(this).attr('src','https://my-website.com/wp-content/uploads/2017/10/testimonialpage.jpg');" 
     onmouseout="$(this).attr('src','https://my-website.com/wp-content/uploads/2017/10/businessman-2606509_1920_20171107090703313.jpg');">
    </a>

Answer 1

您需要做的第一件事是检查是否包含了jQuery并查看控制台是否存在错误。此外，您不需要像在代码中完成的那样做很多事情。您可以使用this.src：

<a href="#">
  <img src="//placehold.it/100?text=Hello"
       onmouseover="this.src='//placehold.it/100?text=Over'"
       onmouseout="this.src='//placehold.it/100?text=Hello'"
       alt=""
  />
</a>

<强>清单

检查控制台。
是否加载了jQuery？
图像路径是否正确？

Answer 2

嗯..所以您可以使用jquery。但是您也可以只使用CSS，这可能要容易得多。您只需使用:hover选择器并在悬停as shown here上更改background-image属性。代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Alter an image on mouse hover</title>
        <style>
            .image {
                width: 130px;
                height: 195px;
                clip-path: border-box;
                background: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.drodd.com%2Fimages14%2Fred4.jpg&f=1&nofb=1) no-repeat;
            }
            .image:hover{
                background: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.zAvnUSUdzPkfFVXmUxbBpQHaE6%26pid%3DApi&f=1) no-repeat;
            }
            body {
                font-family: sans-serif;
                text-align: center;
            }
 
        </style>
    </head>
    <body>
<div class="image" style="margin-left: auto; margin-right: auto;"></div>
    </body>
</html>

Answer 3

试试这个，它应该有效。

jQuery中的悬停效果：

function hover(element) {
    element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}
function unhover(element) {
    element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

和HTML：

<img src="my-src" onmouseover="hover(this);" onmouseout="unhover(this);" />

Answer 4

如果您只想在悬停时更改图像，可以使用css进行操作。

如果你想在运行时这样做，可以在这篇文章中使用方法。 Change :hover CSS properties with JavaScript

使用内联代码在悬停时更改图像

4 个答案: