0

我正在寻找一种解决方案，以允许单击和鼠标悬停时的双重行为。本质上，我需要在将鼠标悬停在图像上时显示一个 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

我究竟做错了什么？

谢谢！

4

1 回答 1

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/

于 2013-10-21T18:56:38.477 回答