如何在鼠標懸停時顯示橫幅div？

Question

演示

正如您在演示中看到的那樣，我在點擊鏈接時顯示橫幅。 除了顯示和隱藏我的橫幅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();
     });
});

Answer 2

我用jQuery Animate做了一個例子。

HTML

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

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

CSS

#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;
 }

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

點擊這里 ！

Answer 3

只需使用hover而不是click ：

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

Answer 4

將click更改為hover將起到作用。

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

的jsfiddle

Answer 5

更新你的小提琴

更新了JSFIDDLE

 $(document).ready(function () {

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

     $('.show_hide').on('mouseover',function () {
         $(".slidingDiv").slideToggle();
         return false;
     });

 });

Answer 6

這是最好的方法：

$(document).ready(function () {

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

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

     });

 });

FIDDLE DEMO

Answer 7

要使其像下拉列表一樣顯示，請將position:absolute添加到.slidingDiv

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

而改變.click到.hover

請參閱此處的示例

Answer 8

試試這個JS

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

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

         });
    });

並將此添加到您的CSS

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

在這里演示

Answer 9

只需使用懸停

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