Jquery悬停在子分区输入时失败

Jquery Hover Failing on Child Div Entry

本文关键字：输入 失败 分区 悬停 Jquery      更新时间：2023-09-26

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

这是代码。

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

这是小提琴的链接。在正确的方向上的任何输入或推动都将受到赞赏。

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

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

演示

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

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

DEMO

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

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

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

相关文章：