Why the box disappear immediately?

Question

I want the mouseover on the coverImg then show the coverInfo

the coverInfo show the title and the description of the image

then the coverInfo do show

but I want the coverInfo stay and clickable when mouserover on itself

but it disappear immediately.

So what's the point I have missed?

The 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>

The CSS：

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

see the jQuery code

$(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：

I have searched a lot and find something similar, I took them and the answer given below together to solve my problem, here is the code:

$(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();
                });
        });

It has just been clean, but do not work fine. What's the problem?

Answer 1

The new box shows immediately because it is not initially marked as hidden. .fadeIn() only fades in something that is initially not showing.

You can make it initially not visible like this:

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

You also can get rid of the .each() iterator you're using. You don't need it. You can just use:

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

You don't need the .each() at all.

I'd also suggest you use .hover(fn1, fn2) instead of .mouseover(fn1) and .mouseout(fn2) .

And, it looks like you are creating a new object and inserting it on every mouseover event such that multiple such objects will pile up in the page. You should either .remove() the object in the mouseout function or you should reuse a previously existing element if it exists in the element rather than creating more and more of them.

Sometimes when you are using the events for mouse hovering and you are also changing the page, the change to the page can cause the element to lose the mouse hover which then hides the change to the page and then it all starts over again. I can't tell for sure if that is happening in your case (I'd need a working example to play with to see), but it seems possible.