Javascript 如何在退出悬停状态后在单击时替换图像并重置为原始图像

我创建了以下带有图像的简单脚本：当您将鼠标悬停在上面时，会出现一个按钮

HTML:

JsFiddle：

1） 如果用第二个图像（）单击按钮，如何替换图像（并隐藏按钮）

2） 一旦存在悬停状态，我如何重置回原始图像？

您可以执行以下操作：

$(".show-image").hover(function() {
    $(this).find("input").show().click(function() {
        $(this).prev("img").attr("src", "http://placehold.it/267x302");
        $(this).hide();
    });
}, function() {
    $(this).find("img").attr("src", "http://lorempixel.com/267/302").unbind("click");
});

小提琴：演示链接：

HTML:

更新：

演示链接：

JS:

---

我试过这个：但有些东西不正常。。。？！当我单击“播放”时，图像不会更改为新图像，播放按钮也不会消失。@Ori——更新并发布了示例You rock！看起来棒极了。不过最后一件事是——在我的原始脚本中，如果你没有点击按钮并退出悬停模式，按钮就会消失。现在按钮保持不变。。。当用户也离开悬停模式时，我如何隐藏它？@Ori——在元素离开函数上调用

.hide（）

，这几乎是完美的！唯一的问题是，一旦点击按钮改变了图像，按钮仍然显示在那里。我尝试添加$（this.hide（）；在$（'img'）.attr（“src“，”）之后，但按钮甚至不会再出现。有没有关于如何修复的想法？

    div.show-image {
        position: relative;
        float:left;
        margin:5px;}

    div.show-image:hover input
      {
      display: block;
      }

    div.show-image input {
        position:absolute;
        display:none;
        top: 100px;
        left: 100px;
    }

$(".show-image").hover(function() {
    $(this).find("input").show().click(function() {
        $(this).prev("img").attr("src", "http://placehold.it/267x302");
        $(this).hide();
    });
}, function() {
    $(this).find("img").attr("src", "http://lorempixel.com/267/302").unbind("click");
});

<div class="show-image">
    <img src="http://mtrobson.com/files/2012/02/maligne-lake-side-sm.jpg" />
    <input class="the-buttons" type="button" value="Play" />
</div>

// Get the Original image source
var originalImgSrc = $('img').attr('src');

// Change image on button click
$(".the-buttons").click(function() {
    $('img').attr("src", "http://r-ec.bstatic.com/images/hotel/max300/178/17807570.jpg");
});

//Restore image on mouse out
$('.show-image img').mouseout(function() {
    $('img').attr("src", originalImgSrc );
});

// Get the Original image source
var originalImgSrc = $('img').attr('src');

// Change image on button click
$(".the-buttons").click(function() {
    $('img').attr("src", "http://r-ec.bstatic.com/images/hotel/max300/178/17807570.jpg");
    $(this).addClass("hide");
});

//Restore image on mouse out
$('.show-image img').mouseout(function() {
    $('img').attr("src", originalImgSrc );
    $('.the-buttons').removeClass("hide");
});