Javascript Jquery悬停在子Div条目上失败

我有一个div，当我悬停时，它交换一个图像，并使div可见。一切似乎都很好，但当您进入child div时，悬停失败并将图像交换回来。我认为应该在子元素中继续悬停，因为您仍然在父元素上悬停。我在文本部分使用mouseenter和mouseleave，在图像交换上尝试了这一点，但它仍然很乐意输入workerData div

这是代码

HTML

Jquery

        var sourceSwap = function () {
                var $this = $(this);
                var newSource = $this.data('alt-src');
                $this.data('alt-src', $this.attr('src'));
                $this.attr('src', newSource);
            }

            $(function() {
                $('img[data-alt-src]').each(function() { 
                    new Image().src = $(this).data('alt-src'); 
                }).hover(sourceSwap, sourceSwap); 
            });
            $('.workers').mouseenter(function(){
                $(this).find('.workerData').show();
            });
            $('.workers').mouseleave(function(){
                $(this).find('.workerData').hide();
            });

---

这里是一个链接到一个。任何正确方向的输入或推送都将不胜感激。

您的图像和文本是同级的。因此，当您将鼠标悬停在文本上时，图像的悬停将结束

使用

.workers

元素悬停（就像显示和隐藏文本一样），如下所示：

或将最后一部分替换为：

$('.workers')
    .hover(function(){
        sourceSwap.call($(this).find('img'));
        $(this).find('.workerData').toggle();
    });

---

最简单的解决方案是添加

指针事件：无到文本类。这使得文本div被悬停侦听器忽略，事件将通过它


这意味着您无法选择文本。如果您需要用户与文本交互，请使用friedi的答案。
就是这样！我应该意识到选择器不是div，而是图像！谢谢
        var sourceSwap = function () {
                var $this = $(this);
                var newSource = $this.data('alt-src');
                $this.data('alt-src', $this.attr('src'));
                $this.attr('src', newSource);
            }

            $(function() {
                $('img[data-alt-src]').each(function() { 
                    new Image().src = $(this).data('alt-src'); 
                }).hover(sourceSwap, sourceSwap); 
            });
            $('.workers').mouseenter(function(){
                $(this).find('.workerData').show();
            });
            $('.workers').mouseleave(function(){
                $(this).find('.workerData').hide();
            });

var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

$(function() {
    $('img[data-alt-src]').each(function() { 
        new Image().src = $(this).data('alt-src'); 
    });
});

$('.workers')
    .mouseenter(function(){
        sourceSwap.call($(this).find('img'));
        $(this).find('.workerData').show();
    })
    .mouseleave(function(){
        sourceSwap.call($(this).find('img'));
        $(this).find('.workerData').hide();
    });

$('.workers')
    .hover(function(){
        sourceSwap.call($(this).find('img'));
        $(this).find('.workerData').toggle();
    });