show/hide a div on hover and hover out
Solution 1
May be there no need for JS. You can achieve this with css also. Write like this:
.flyout {
position: absolute;
width: 1000px;
height: 450px;
background: red;
overflow: hidden;
z-index: 10000;
display: none;
}
#menu:hover + .flyout {
display: block;
}
Solution 2
Why not just use .show()/.hide()
instead?
$("#menu").hover(function(){
$('.flyout').show();
},function(){
$('.flyout').hide();
});
Solution 3
Here are different method of doing this. And i found your code is even working fine.
Your code: http://jsfiddle.net/NKC2j/
Jquery toggle class demo: http://jsfiddle.net/NKC2j/2/
Jquery fade toggle: http://jsfiddle.net/NKC2j/3/
Jquery slide toggle: http://jsfiddle.net/NKC2j/4/
And you can do this with CSS as answered by Sandeep
Solution 4
I found using css opacity is better for a simple show/hide hover, and you can add css3 transitions to make a nice finished hover effect. The transitions will just be dropped by older IE browsers, so it degrades gracefully to.
CSS
#stuff {
opacity: 0.0;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#hover {
width:80px;
height:20px;
background-color:green;
margin-bottom:15px;
}
#hover:hover + #stuff {
opacity: 1.0;
}
HTML
<div id="hover">Hover</div>
<div id="stuff">stuff</div>
Solution 5
<script type="text/javascript">
var IdAry=['reports1'];
window.onload=function() {
for (var zxc0=0;zxc0<IdAry.length;zxc0++){
var el=document.getElementById(IdAry[zxc0]);
if (el){
el.onmouseover=function() {
changeText(this,'hide','show')
}
el.onmouseout=function() {
changeText(this,'show','hide');
}
}
}
}
function changeText(obj,cl1,cl2) {
obj.getElementsByTagName('SPAN')[0].className=cl1;
obj.getElementsByTagName('SPAN')[1].className=cl2;
}
</script>
ur html should look like this
<p id="reports1">
<span id="span1">Test Content</span>
<span class="hide">
<br /> <br /> This is the content that appears when u hover on the it
</span>
</p>
Tsukimoto Mitsumasa
Me: Website is done! Inner Me: False. A website is never "done".
Updated on May 09, 2020Comments
-
Tsukimoto Mitsumasa about 4 years
I would like to show and hide a div during hover and hover out.
here's what I've done lately.
css
$("#menu").hover(function() { $('.flyout').removeClass('hidden'); }, function() { $('.flyout').addClass('hidden'); });
.flyout { position: absolute; width: 1000px; height: 450px; background: red; overflow: hidden; z-index: 10000; } .hidden { visibility: hidden; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <div id="menu" class="margint10 round-border"> <a href="#"><img src="images/menu.jpg" alt="" id="menu_link" /></a> </div> <div class="flyout hidden"> </div>
My problem is that when I hover on the menu id, the flyout div is blinking. why is that?
-
xdazz almost 12 years@nnnnnn show/hide use
display
instead ofvisibility
, the difference isvisibility
will still take hold place whiledisplay
doesn't. The op code may be affected by other of his html code. -
nnnnnn almost 12 yearsSure, I understand the difference between
display
andvisibility
- I meant why would the OP's code cause any blinking but yours wouldn't? (I prefer your solution, but I don't see why it would help.) -
MonsterMMORPG over 10 yearscan you explain + .flyout{ ?
-
sandeep over 10 yearsit's called Adjacent sibling combinator. For more read this w3.org/wiki/CSS/Selectors/combinators/adjacent
-
Griffin over 10 yearsdisplay:inline-block to get the element to appear in flow order.