javascript - 如何在鼠标悬停时显示横幅 div？

Question

Demo

正如您在演示中看到的，我在单击链接时显示了一个横幅。除了显示和隐藏横幅 div 之外，我还想在鼠标悬停时显示我的横幅(如下拉菜单)，以便在用户单击链接之前向他们显示其中的内容。

HTML:

<a href="" class="show_hide">One</a>

<div class="slidingDiv" >
    <img src="http://www.freedigitalphotos.net/images/images/home/spring.jpg" />
</div>

JQuery:

 $(document).ready(function() {

     $(".slidingDiv").hide();
     $(".show_hide").show();

     $('.show_hide').click(function () {
         $(".slidingDiv").slideToggle();
         return false;
     });

 });

Answer 1

$(document).ready(function () {

     $(".slidingDiv").hide();
     $(".show_hide").show();

     $('.show_hide').on('mouseover',function () {
         $(".slidingDiv").show();
     });
     $('.show_hide').on('mouseleave',function () {
         $(".slidingDiv").hide();
     });
});