Jquery：悬停时显示/隐藏div。单击时显示

Question

假设我有一个带有 .description 类的 div。

当用户悬停在另一个带有 .image 类的 div 上时，我想显示 div.description 。

然而，当用户点击 div.image时，我希望 div.description 保持可见。因此，如果用户点击 .image，则应不应用 mouseleave 事件。

最后，当用户再次点击 .image 时，悬停功能应该重新激活。因此，当鼠标离开 .image1 时，div.description 将再次隐藏。

希望这可以帮到您！

- NvdB31

---

你尝试了什么？展示一下你的代码。 - Ehsan Sajjad

比“说”所有这些更容易的是看到实际的HTML。 - David Thomas

Answer 1

var cancel = false;
$(".another").hover(function(){
    $("div.description").show();
},function(){
  if(!cancel)
  $("div.description").hide();
});

$(".image").click(function(){
  cancel = (cancel)?false: true;
});

- Pankaj Sharma

---

触摸屏设备没有悬停功能，因此如果取消为真，则您可能希望在单击函数内调用** $（“div.description”）.show（）”。 - Adam

Answer 2

您可以尝试类似这样的方式：http://jqversion.com/#!/CCvqpwh

$('.image').bind('mouseenter', function(){
    $('.description').show();
}).bind('mouseleave', function(){
    $('.description').hide();
}).click(function(){
  if (!$(this).hasClass('clicked')){
    $(this).addClass('clicked');
    $(this).unbind('mouseleave');
  } else {
    $(this).removeClass('clicked');
    $(this).bind('mouseleave', function(){
        $('.description').hide();
    })
  }
});

- Mihai Matei

Answer 3

请使用这个脚本。

   jQuery(document).ready(function() {
        jQuery('.overlay').hide();
    });
    jQuery(document).ready(function() {
        jQuery('.element, .element-1').hover(function() {
            jQuery('.overlay').show();
            },
        function() {
            jQuery('.overlay').hide();
            });
    });

- Manish Negi

Answer 4

你可以像下面这样将两个事件绑定到同一个元素上，并使用不同的函数来获取你想要的。

var myFunction1 = function() {
   $('div.description').show();
}
var myFunction2 = function() {
  // do whatever you want
}
$('div.image')
    .click(myFunction1)
    .mouseover(myFunction2)

- underscore