javascript - 带链接的 div 在我可以使用之前消失（jquery 隐藏/显示）

Question

我有一个图标，当我将鼠标悬停在它上面时，它会显示一个带有链接的 div。用户应该能够单击此链接，但当鼠标离开图标时它会消失。有谁知道我怎样才能防止这种情况发生？

编码：

$('.div1').hover(function(e){   
    e.preventDefault();
    e.stopPropagation();
    $(this).next().show('fast');
},
function(e){
    e.preventDefault();
    e.stopPropagation();    
    $(this).next().hide('fast');
});

我做了一个 JSfiddle 来显示问题：

http://jsfiddle.net/2wrjG/5

Answer 1

问题是您在尝试单击链接时留下了 img-tag。我建议包装所有内容并在此包装上调用悬停。

这是一个工作小提琴：http: //jsfiddle.net/2wrjG/2/

$('.wrapper').hover(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).children('a').show('fast');
},

function (e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).children('a').hide('fast');
});

HTML部分：

<div class="wrapper">
<img class="domaininfo" src="http://domeinwinkel.sitestatus.nl/gfx/itje.png">
<a class="domain-info-window" id="domain-info-window-2" href="#">
Is deze domeinnaam bij een andere provider geregistreerd maar wil je profiteren van de voordelen van Domeinwinkel? Verhuizen naar Domeinwinkel is snel geregeld!
</a>
</div>

CSS：

.domaininfo {
    position: relative;
    top: 0px;
    left: 0px;
}

Answer 2

$('.domaininfo').hover(function (e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).next().show('fast');
},
function (e) {
    e.preventDefault();
    e.stopPropagation();
    $('.domain-info-window').hover(function (e) {
        e.preventDefault();
        e.stopPropagation();
    },
    function (e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).hide('fast');
    });
});

在这里演示

Answer 3

将鼠标悬停在图像上时会显示 div。如果您希望链接仅在您单击它时消失，我想这可以帮助您。

enter code here

 $('.domaininfo').hover(function (e) {
          e.preventDefault();
          e.stopPropagation();
          $(this).next().show('fast');
    },function (e) {
            e.preventDefault();
            e.stopPropagation();
            $('.domain-info-window').click(function (e) {
                $(this).hide();
            });
        });