Jquery：悬停时显示/隐藏 div。点击显示答案

【问题标题】：Jquery: show/hide div on hover. Show on clickJquery：悬停时显示/隐藏 div。点击显示
【发布时间】：2014-06-12 20:25:16
【问题描述】：

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

我希望在用户将鼠标悬停在另一个 div 上时显示 div.description，并使用 .image 类。

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

最后，当用户再次点击.image 时，悬停功能应该再次被激活。这样当鼠标离开.image1时，div.description又会被隐藏起来。

希望大家能帮帮我！

【问题讨论】：

你累什么了，出示你的代码
比“说”这一切更容易的是看到实际的 HTML。

标签： jquery mouseover show jquery-hover mouseleave

【解决方案1】：

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

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

【讨论】：

触摸屏设备没有悬停功能，因此如果取消为真，您可能需要在点击功能中调用**$("div.description").show()"。

【解决方案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();
    })
  }
});

【讨论】：

【解决方案3】：

您可以将两个事件绑定到相同的元素，如下所示。并使用单独的函数来获得您想要的内容

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

【讨论】：

【解决方案4】：

使用这个脚本

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

【讨论】：