Search code examples
jquerymouseeventmouseleave

Mousenter, leave function event jquery

What's wrong with this code. It doesn't work.

$(".sider").on("mouseenter") function(event){
$(".sider-post").fadeIn(350);
}).on("mouseleave") function(event){
$(".sider-post").fadeOut(350);
});

Here's the html, the sider should be visible-the border, but the child should fade. thanks

<div class="sider" style="border:2px dotted black">
<div class="sider-post" style="background:black;">some content</div>
</div>

Any ideas?

Solution

  • You are giving ) at the place of , after events.

    Should be this

    $(".siderr").on("mouseenter", function(event){
  $(".sider-post").fadeIn(350);
}).on("mouseleave", function(event){
   $(".sider-post").fadeOut(350);
});

    DEMO