To get it to display like a dropdown, add position:absolute
to the .slidingDiv
.slidingDiv {
margin-bottom:30px;
position:absolute;
}
And change .click
to .hover
See the example HERE
题
As you can see in the demo, I'm showing a banner on clicking the link. Along with showing and hiding my banner div
, I want to show my banner on mouseover (like a dropdown) to show users what is there, before they click the link.
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;
});
});
解决方案 3
To get it to display like a dropdown, add position:absolute
to the .slidingDiv
.slidingDiv {
margin-bottom:30px;
position:absolute;
}
And change .click
to .hover
See the example HERE
其他提示
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('mouseover',function () {
$(".slidingDiv").show();
});
$('.show_hide').on('mouseleave',function () {
$(".slidingDiv").hide();
});
});
I did an example with 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 ) });
});
Click here!
Just use hover
instead of click
:
$('.show_hide').hover(function () {
$(".slidingDiv").slideToggle();
return false;
});
Changing click
to hover
will do the trick.
$('.show_hide').hover(function () {
$(".slidingDiv").slideToggle();
return false;
});
Updated your fiddle
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('mouseover',function () {
$(".slidingDiv").slideToggle();
return false;
});
});
This is the best approach:
$(document).ready(function () {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('mouseover mouseout',function () {
$(".slidingDiv").slideToggle();
});
});
try this JS
$(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').hover(function () {
$(".slidingDiv").slideToggle();
});
});
And Add This To Your CSS
.slidingDiv {
margin-bottom:30px;
position:absolute;
}
.show_hide {
display:none;
}
Just use hover
$('.show_hide').hover(function () {
$(".slidingDiv").slideToggle();
return false;
});