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() {_x000D_
$('.flyout').removeClass('hidden');_x000D_
}, function() {_x000D_
$('.flyout').addClass('hidden');_x000D_
});.flyout {_x000D_
position: absolute;_x000D_
width: 1000px;_x000D_
height: 450px;_x000D_
background: red;_x000D_
overflow: hidden;_x000D_
z-index: 10000;_x000D_
}_x000D_
_x000D_
.hidden {_x000D_
visibility: hidden;_x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>_x000D_
<div id="menu" class="margint10 round-border">_x000D_
<a href="#"><img src="images/menu.jpg" alt="" id="menu_link" /></a>_x000D_
</div>_x000D_
<div class="flyout hidden"> </div>My problem is that when I hover on the menu id, the flyout div is blinking. why is that?
Why not just use .show()/.hide() instead?
$("#menu").hover(function(){
$('.flyout').show();
},function(){
$('.flyout').hide();
});
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
You could use jQuery to show the div, and set it at wherever your mouse is:
html:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="trigger">
<h1>Hover me!</h1>
<p>Ill show you wonderful things</p>
</div>
<div id="secret">
shhhh
</div>
<script src="script.js"></script>
</body>
</html>
styles:
#trigger {
border: 1px solid black;
}
#secret {
display:none;
top:0;
position:absolute;
background: grey;
color:white;
width: 50%;
}
js:
$("#trigger").hover(function(e){
$("#secret").show().css('top', e.pageY + "px").css('left', e.pageX + "px");
},function(e){
$("#secret").hide()
})
You can find the example here Cheers! http://plnkr.co/edit/LAhs8X9F8N3ft7qFvjzy?p=preview
<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>
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.
#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;
}
<div id="hover">Hover</div>
<div id="stuff">stuff</div>
Source: Stackoverflow.com