在悬停和单击时在图像 src 之间切换答案

【问题标题】：Toggling between image src on hover and on click在悬停和单击时在图像 src 之间切换
【发布时间】：2018-08-09 10:28:59
【问题描述】：

我有两个版本的图像 - 灰色图像和同一图像的彩色版本。在正常状态下，图像是灰色的。悬停或单击时，图像变为彩色版本。

我知道这可以通过toggleClass/addClass/etc 或更改attr(src) 来完成。我已经设法让这个与悬停一起工作，但我无法让点击元素工作。

这些是我正在尝试使用的图像和页面 - http://www.expatlifeinsurance.com/contact-health-insurance/

这是我现在的代码：

<div id="smokers">
<img id="nosmoke" src="http://www.expatlifeinsurance.com/images/smoke_no_grey.png">
    &nbsp;&nbsp;
<img id="smoke" src="http://www.expatlifeinsurance.com/images/smoke_grey.png">
</div>

$("#nosmoke")
.mouseover(function() {
this.src = this.src.replace('http://www.expatlifeinsurance.com/images/smoke_no_grey.png', 'http://www.expatlifeinsurance.com/images/smoke_no_green.png');
})
.mouseout(function() {
this.src = this.src.replace('http://www.expatlifeinsurance.com/images/smoke_no_green.png', 'http://www.expatlifeinsurance.com/images/smoke_no_grey.png');
})
.click(function() {
$(this).toggleClass("off");
if ($(this).hasClass("off")) this.src = this.src.replace(/(.*)-on(.*)/, "$1-off$2");
else this.src = this.src.replace(/(.*)-off(.*)/, "$1-on$2");
}
);

【问题讨论】：

请将您的代码添加到问题中。理想情况下，在一个正常工作的 sn-p 中，这样我们就可以看到问题。
另请注意，您可以在纯 CSS 中实现这一点：codepen.io/jahid-webdev/pen/JRPvBj，但请注意，如果您需要 IE 支持，您需要修改它以使用 IE specific filter for greyscale
您可以在悬停和单击时使用 jquery 更改它，看看这篇文章。 stackoverflow.com/questions/23959132/…
@MohamedElgarnaoui 我已经尝试过这段代码，但它对我不起作用。请参阅上面我将编辑问题。
请添加您的代码

标签： jquery

【解决方案1】：

在寻找您的代码后，我得出的结论是该代码可以完美运行，您可以尝试一下。如果它可以帮助您解决问题。

点击功能完美运行在浏览器中查看inspect element 中的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="smokers">
        <img id="nosmoke" src="http://www.expatlifeinsurance.com/images/smoke_no_grey.png">
            &nbsp;&nbsp;
        <img id="smoke" src="http://www.expatlifeinsurance.com/images/smoke_grey.png">
        </div>

</body>

<script>
        $(document).ready(function() {

           $("#nosmoke").mouseover(function() {
               this.src = this.src.replace('http://www.expatlifeinsurance.com/images/smoke_no_grey.png', 'http://www.expatlifeinsurance.com/images/smoke_no_green.png');
           });

           $("#nosmoke").mouseout(function() {
               this.src = this.src.replace('http://www.expatlifeinsurance.com/images/smoke_no_green.png', 'http://www.expatlifeinsurance.com/images/smoke_no_grey.png');
           });

           $("#nosmoke").click(function() {
               $(this).toggleClass("off");
               if ($(this).hasClass("off")){ 
                   this.src = this.src.replace(/(.*)-on(.*)/, "$1-off$2");
               }
               else {
                   this.src = this.src.replace(/(.*)-off(.*)/, "$1-on$2");
               }
           });
       });
</script>
</html>

【讨论】：

不，您可以在浏览器中的 insepect 元素中看到