Javascript 如何在鼠标上方显示横幅div？

正如您在演示中看到的，我在单击链接时显示了一条横幅。除了显示和隐藏我的横幅

div

，我还想在用户单击链接之前在鼠标上方显示我的横幅（像下拉菜单一样），向用户显示那里有什么

HTML:

---

只需使用

悬停

而不是

单击

：

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

---

将

单击

更改为

悬停

即可

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

更新了您的小提琴

---

这是最好的方法：

$(document).ready(function () {

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

     $('.show_hide').on('mouseover mouseout',function () {
         $(".slidingDiv").slideToggle();

     });

 });

要使其像下拉菜单一样显示，请在

中添加
位置：绝对

.slidingDiv {
    margin-bottom:30px;
    position:absolute;
}

然后更改
。单击
至
。悬停

参见示例
试试这个
JS

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

         $('.show_hide').hover(function () {
             $(".slidingDiv").slideToggle();

         });
    });

并将其添加到您的
CSS

.slidingDiv {
    margin-bottom:30px;
    position:absolute;
}
.show_hide {
    display:none;
}

只需使用悬停即可

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

我用jqueryanimate做了一个例子

HTML

jQuery 1.10.1

    var toggleDiv = function( selector, height, width, marginBottom, opacity, time ){
            $(selector)
                .removeAttr('style')
                .stop().animate({
                    'height': height,
                    'width': width,
                    'marginBottom': marginBottom, 
                    'opacity': opacity 
                }, time, 'swing', function(){ console.log('Done!!'); } );
            };

    $(document).ready(function () {

        var myImg = $( 'img', '#slidingDiv' ),
            myLink = $( '#myLink' );

        $( myImg ).hide();
        $( myLink )
            .on('mouseenter', function(){ toggleDiv( myImg, '100px', '100px', '30px', 1, 10 ) })
            .on('mouseleave', function() { toggleDiv( myImg, '0px', '100px', '0px', 0, 10 ) });
     });  

点击
 但这会影响下面的内容。。我不知道你是什么意思。从你提问的措辞来看，这为你提出的问题提供了一个解决方案——它显示了鼠标上方的横幅。@Ishan:谢谢。。这就是我想要的：）好的，我想您要求同时绑定“单击”和“悬停”两个事件处理程序。请看看这把小提琴。但这不是一个好方法，因为当你点击这个项目时，你已经将它悬停了。
.slidingDiv {
    margin-bottom:30px;
    position:absolute;
}
.show_hide {
    display:none;
}

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

$(document).ready(function () {

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

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

    <a id="myLink" href="#">One</a>

    <div id="slidingDiv">
        <img src="http://dummyimage.com/100x100/000/fff" />
    </div>

#slidingDiv img{
   margin: 0 0 0 0;
   position: absolute;
   height: 0px;
   width: 100px;
   opacity: 0;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
 }

    var toggleDiv = function( selector, height, width, marginBottom, opacity, time ){
            $(selector)
                .removeAttr('style')
                .stop().animate({
                    'height': height,
                    'width': width,
                    'marginBottom': marginBottom, 
                    'opacity': opacity 
                }, time, 'swing', function(){ console.log('Done!!'); } );
            };

    $(document).ready(function () {

        var myImg = $( 'img', '#slidingDiv' ),
            myLink = $( '#myLink' );

        $( myImg ).hide();
        $( myLink )
            .on('mouseenter', function(){ toggleDiv( myImg, '100px', '100px', '30px', 1, 10 ) })
            .on('mouseleave', function() { toggleDiv( myImg, '0px', '100px', '0px', 0, 10 ) });
     });