结合点击和悬停答案

【问题标题】：Combine Click with hover结合点击和悬停
【发布时间】：2010-09-20 11:21:48
【问题描述】：

我需要让此代码正常工作，以便在单击该项目时鼠标移出不会淡出元素。

$('.link1').hover(function(){
    $('#image1').fadeIn();
},function(){
    $('#image1').fadeOut();
}).click(function(){
    $('#image1').css('display','block');
});

提前致谢。

【问题讨论】：

标签： jquery click hover

【解决方案1】：

$('.link1').hover(function(){
    $('#image1').fadeIn();
},function(){
    var clicked = $(this).data('clicked');
    if(!clicked) $('#image1').fadeOut();
}).click(function(){
    $(this).data('clicked', true);
    $('#image1').css('display','block');
});

【讨论】：

我现在需要动态添加图像的 id，这似乎不起作用。我刚刚试图让第一部分工作。 $('#image-map area').hover(function(){ var linkClass = $(this).attr("class"); var linkClassID = '#' + linkClass; linkClassID.stop(true, true)。 fadeIn(); },function(){ var clicked = $(this).data('clicked'); if(!clicked) $('#image1').stop(true, true).fadeOut(); } ).click(function(){ $(this).data('clicked', true); $('#image1').css('display','block'); $('#image1').siblings ('display','none'); });
@Clint - 这有点难以阅读。也许它值得一个单独的问题？

【解决方案2】：

添加一些属性，以便您检查它。

$('.link1').hover(function(){
  if(!$('#image1').is(':visible')) $('#image1').fadeIn();
}, function(){
  if(!$(this).attr("clicked")) $('#image1').fadeOut();
}).click(function(){
  $(this).attr("clicked", true);
  $('#image1').css('display','block');
});

【讨论】：