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

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

DEMO HERE

Answer 2

问题是当您尝试单击链接时保留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 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();
            });
        });

带链接的Div在我可以使用之前消失（jquery hide / show）

3 个答案: