img src path дает первого ребенка только при наведении jquery

Question

Я создал изображение div в html и ниже код

<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-h и cms в cms-h, как я могу вернуть исходный путь src этого изображения, чтобы это изображение было активным.Когда я нажимаю на другое изображение, ранее щелкнутое изображение должно перейти к исходному пути

Answer 1

Используйте это вместо:

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

В вашем случае вы ищете тег img во всем документе и берете первый из них.

Answer 2

Используйте this для нацеливания на текущий элемент и children() для выбора изображения;

$(".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);