javascript - Jquery 悬停在子 Div 条目上失败

Question

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

这是代码。

HTML

        <div id="workersAre">
            <div class="workers" id="anita">
                <div class="workerImage">
                    <img src="http://s28.postimg.org/biajzhy1p/anita.jpg" data-alt-src="http://s14.postimg.org/3v8gu1e0h/anita_Over.jpg" class="workerCover">
                </div>
                <div class="workerData">
                    <h1>Anita Art Maker</h1>
                    <h2>Arty, Art, Art</h2>
                </div>
            </div>
        </div>

CSS

        #workerAre{
            width:100%;
        }
        .viveWorkers{
            width:100%;
            float:left;
            position:relative;
        }
        .workerImage{
            position:relative;
        }
        .workerCover{
            width:100%;
        }
        .workerData{
            position:absolute;
            top:0;
            width:100%;
            text-align: center;
            display:none;
        }

查询

        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();
            });

这里是一个链接 fiddle .任何意见或正确方向的插入将不胜感激。

Answer 1

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

使用 .workers 元素进行悬停(就像显示和隐藏文本一样)，如下所示:

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();
    });

DEMO

或者将最后一部分替换为:

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

DEMO