Question

我正在寻找一种解决方案，允许在点击和鼠标悬停时出现双重行为。实际上，我需要在将鼠标悬停在图像上时显示div，并在页面上将其固定（显示直到另一个事件）并在用户点击图像外部/外部时隐藏它。

这是我到目前为止所拥有的

HTML 你好

JS

$(document).ready(function() {

 $("#garden-1").mouseover(function(e) {
    //  Show my popup with slide effect, this can be a simple 
    $("#garden1").show("slow");

  // Bind click event to a link
  $("#garden-1").click(function(e) {
    e.preventDefault();
    //  Show my popup with slide effect, this can be a simple .show() or .fadeToggle()
    $("#garden1").slideToggle("slow");
  });

  // Cancel the mouseup event in the popup
  $("#garden1").mouseup(function() {
    return false
  });
  // Bind mouseup event to all the document
  $(document).mouseup(function(e) {
    // Check if the click is outside the popup
    if($(e.target).parents("#garden1").length==0 && !$(e.target).is("#garden1")) {
      // Hide the popup
      $("#garden1").slideUp("slow");
    }
  });
});

</script>

但是，结果不如想法，您可以在此处看到：http://candelascommunity.businesscatalyst.com/test

我做错了什么？

谢谢！

Answer 1

更大的问题是，您应该只包含每个实例，并使其更顺畅，更容易。

如果你要改变你的html更像。

<div class="box">
    <img src="/img/palm.jpg"/>
    <p>Hiya</p>
</div>

和你的jquery更像是

$('.box img').hover(function() {
    $(this).siblings('p').show();
}, function() {
    if (!$(this).siblings('p').hasClass('on')) {
        $(this).siblings('p').hide();
    }
}).on('click', function(){
    $('.on').removeClass('on').hide();
    $(this).siblings('p').addClass('on');
});

然后你只需要添加这个css，你应该设置

.box p{display:none}
.box p.on{display:block!important}

制作小提琴：http://jsfiddle.net/filever10/NqQFh/

在点击和悬停时显示的粘性工具提示

1 个答案: