为什么盒子立即消失？

Question

我要上coverImg鼠标悬停则显示coverInfo

的coverInfo显示标题和图像

的描述则coverInfo确实显示

，但我想coverInfo留点击时鼠标自身

但它立即消失。

那么我错过了什么？

的HTML

<div class="workshop_img"> 
    <div class="coverInfo"></div> 
     <a href="#"> 
      <span class="coverImg" style="background-image:url('images/work/show1.jpg')" title="Chictopia "></span> 
     </a> 

的CSS：

.coverInfo { 
    position:absolute; 
    width: 200px; 
    height:200px; 
    background:rgba(0,0,0,0.5); 
    top:30%; 
    left:30%; 
    display:none; 
} 

看到jQuery代码

$(function() { 

      $(".coverImg").each(function() { 
       //make the background image move a little pixels 
       $(this).css({ 
        'backgroundPosition' : "-40px 0" 
       }).mouseover(function() { 
        $(this).stop().animate({ 
         'backgroundPosition' : " -20px -60px " 
        }, { 
         duration : 90 
        }); 

        //shwo the info box 
        var content = $(this).attr("title"); 
        $("<div class='coverInfo'></div>").text(content).prependTo($(this).parent()).fadeIn("fast"); 

       }).mouseout(function() { 
        $(this).stop().animate({ 
         'backgroundPosition' : "-40px 0" 
        }, { 
         duration : 200, 
        }); 
        $(this).parent().find(".coverInfo").stop().fadeOut("fast"); 
       }) 
      }) 
     }); 

     </div> 

编辑：

我寻觅了很多，发现类似的东西，我把他们和下面给出共同解决我的问题的答案，这里是代码：

$(function() { 

      $(".coverImg").css({ 
       'backgroundPosition' : "-40px 0" 
      }).mouseenter(function() { 
       var box = $(this).parents(".workshop_img").find(".coverInfo"); 
       var content = $(this).attr("title"); 
       var info = box.text(content); 
        $(this).stop().animate({ 
         'backgroundPosition' : " -20px -60px " 
        },90); 
        info.show(); 

       }).mouseleave(function() { 
        var box = $(this).parents(".workshop_img").find(".coverInfo"); 
        var content = $(this).attr("title"); 
        var info = box.text(content); 
        $(this).stop().animate({ 
         'backgroundPosition' : "-40px 0" 
        },200); 
        info.stop().hide(); 
       }); 
     }); 

它刚刚干净，但不能正常工作。 什么问题？

Answer 1

新盒子立即显示，因为它最初没有标记为隐藏。 .fadeIn()只会淡化最初没有显示的内容。

你可以把它最初并不喜欢这个可视：

$("<div class='coverInfo'></div>").text(content).hide().prependTo($(this).parent()).fadeIn("fast"); 

您也可以摆脱你正在使用的.each()迭代。你不需要它。你可以使用：

$(".coverImg").css(...).mouseover(...).mouseout(...); 

你并不需要.each()可言。

我也建议你用.hover(fn1, fn2)而不是.mouseover(fn1)和.mouseout(fn2)。

而且，看起来您正在创建一个新对象并将其插入到每个mouseover事件中，以便多个此类对象将堆积在页面中。您应该在mouseout函数中使用.remove()对象，或者如果它存在于元素中，而不是创建更多元素，则应重新使用先前存在的元素。

有时，当您使用鼠标悬停事件并且您还在更改页面时，对页面的更改可能会导致元素丢失鼠标悬停，然后将更改隐藏到页面上，然后重新开始再次。我无法确定你的情况是否发生了这种情况（我需要一个可用的例子来玩），但似乎可能。