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

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

});

來源

2014-04-23 G.L.P

爲了得到它，以顯示像下拉，添加position:absolute到.slidingDiv

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

，並更改.click到.hover

見的例子HERE

來源

2014-04-23 11:21:34 anothershrubery

只需使用hover代替click：

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

來源

2014-04-23 11:10:15

更改click到hover會做的伎倆。

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

JSFiddle

來源

2014-04-23 11:11:17 Bucket

但是這影響了下面的內容..有沒有什麼辦法可以像下拉式那樣顯示 –

我不確定你的意思。從你提出問題的方式來看，這提供了一個你要求的解決方案 - 它顯示了鼠標懸停的橫幅。 – Bucket

@Kiran：也許你想要這個 - http://jsfiddle.net/g39mc/7/ –

更新您的提琴

Updated JSFIDDLE

$(document).ready(function() { 

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

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

});

來源

2014-04-23 11:11:30

這是最好的辦法：

$(document).ready(function() { 

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

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

    }); 

});

FIDDLE DEMO

來源

2014-04-23 11:17:55 Tuhin

試試這個 JS

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

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

     }); 
    });

並添加到您的CSS

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

DEMO HERE

來源

2014-04-23 11:22:06 Kiranramchandran

只需使用懸停

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

來源

2014-06-06 15:39:43 MCMXCII

$(document).ready(function() { 

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

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

來源

2014-11-20 15:35:58

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

點擊here！

來源

2014-12-24 00:48:18

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

回答

相關問題