子 Div 条目上的 Jquery 悬停失败答案

【问题标题】：Jquery Hover Failing on Child Div Entry子 Div 条目上的 Jquery 悬停失败
【发布时间】：2014-10-30 14:30:18
【问题描述】：

我有一个 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;
        }

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

这是fiddle 的链接。我们将不胜感激任何输入或朝着正确方向的推动。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

使用.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

【讨论】：

就是这样！我应该意识到选择器不是 div，而是图像！谢谢！

【解决方案2】：

最简单的解决方案是在文本类中添加pointer-events:none;。这会使悬停侦听器忽略文本 div，并且事件会通过它。

http://jsfiddle.net/fqn55yfs/4/

这意味着您无法选择文本。如果您需要与文本进行用户交互，请使用 Friedi 的答案。

【讨论】：