Mouseover or Mouseenter ?

Mouseover or Mouseenter ?

Hi i'm pretty new to jquery and javascript in general so i have a short question you might be able to help me with:


I have a div containing an image (.cover) and another div with an alpha-transparent overlay image (.cover_hover) in the exact position as .cover but set to display:none.

when i roll over the .cover div i'd like to have the .cover_hover div  shown, and when i roll out i want to have it hide again. how am i gonna do this the right way?

This was my approach:

  1.     $(".cover").mouseenter(function(){
            $(".cover_hover").show();
        })
            .mouseleave(function(){
            $(".cover_hover").hide();
        });





This works so far for me. But the problem is that i have more than one .cover on the page and now, when i enter one of this .cover div's all .cover div's show the overlay. I want the change only for the .cover im on right now.

I think this works somehow with $(this) but i dont know how to use this command. can somebody help me with this?

thanks a lot !