Почему коробка сразу исчезает?

Question

Я хочу MouseOver на coverImg затем показать coverInfo

coverInfo показать название и описание изображения

тогда coverInfo действительно показывают

но я хочу coverInfo остаться и интерактивными, когда mouserover on себя

, но он сразу же исчезает.

Так в чем же я пропустил?

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> 

EDIT:

Я искал много, и найти что-то подобное, я взял их и ответ приводится ниже вместе, чтобы решить мою проблему, вот код:

$(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, чтобы на этой странице накапливалось несколько таких объектов. Вы должны либо .remove() объект в функции mouseout, либо вы должны повторно использовать ранее существовавший элемент, если он существует в элементе, а не создавать все больше и больше из них.

Иногда, когда вы используете события для зависания мыши, и вы также меняете страницу, изменение страницы может привести к тому, что элемент теряет наведение мыши, которое затем скрывает изменение на странице, а затем все начинается еще раз. Я не могу точно сказать, происходит ли это в вашем случае (мне нужен рабочий пример, чтобы поиграть, чтобы посмотреть), но это кажется возможным.