img src 路径仅在悬停 jquery 时给出第一个子项

Question

我在 html 中创建了一个图像 div，下面是代码

<div class="container">
    <div class="TabMenu">
        <span><img src="images/ecom.png"></span>
        <span><img src="images/cms.png"></span>
        <span><img src="images/crm.png"></span>
        <span><img src="images/creative.png"></span>
        <span><img src="images/development.png"></span>
        <span><img src="images/qa.png"></span>
        <span><img src="images/mobile.png"></span>
    </div>
</div>

现在我编写了 jquery

$(".container .TabMenu span").mouseover(function() {
    var imgpath = $('img').prop('src');
    alert(imgpath);
})

当鼠标悬停在任何图像上时，它会显示一个带有第一个图像路径的警报框，但不显示相应的路径。我如何检索各自的图像路径

现在我在这里扩展一个问题

当我单击特定图像时，它的图像应该被更改，下面是我编写的代码

我有两个图像作为 image1.png 和 image1-h.png，通过这样我使用悬停样式，但

$(".container .TabMenu span").click(function(){
var newSrc = $('img', this).attr('src').replace(".", "-h.");
$('img', this).attr("src", newSrc);             
});

我有两个图像作为 image1.png 和 image1-h.png，通过这种方式，我通过将图像名称替换为“-h”来使用悬停样式。但是当我单击此图像 ecom 时，它会变成 ecom-h，cms 会变成 cms-h，我怎样才能恢复该图像的原始 src 路径，以便该图像处于活动状态。 当我单击其他图像时，先前单击的图像的路径应到达原始路径

Answer 1

请使用此选项：

var imgpath = $('img', this).prop('src');

在您的情况下，您正在整个文档中查找 img 标记并首先获取它们。

Answer 2

使用 this 定位当前元素，并使用 children()< /a> 选择图像；

$(".container .TabMenu span").mouseover(function(){
    var imgpath = $(this).children('img').prop('src') ;
    alert(imgpath);
});

Answer 3

尝试：

$(".container .TabMenu span").mouseover(function(){
var imgpath = $(this).children("img").attr('src') ;
alert(imgpath);