Pop-up div on hover
use the below code to popup the text and Develop the Code...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Tutorial - Pop-up div on hover</title>
<style type="text/css">
h1, h3 {
margin: 0;
padding: 0;
font-weight: normal;
}
a {
color: #EB067B;
}
div#container {
width: 580px;
margin: 100px auto 0 auto;
padding: 20px;
border: 1px solid #1a1a1a;
}
/* HOVER STYLES */
div#pop-up {
display: none;
position: absolute;
width: 280px;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 1px solid #1a1a1a;
font-size: 90%;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var moveLeft = 20;
var moveDown = 10;
$('a#trigger').hover(function(e) {
$('div#pop-up').show();
//.css('top', e.pageY + moveDown)
//.css('left', e.pageX + moveLeft)
//.appendTo('body');
}, function() {
$('div#pop-up').hide();
});
$('a#trigger').mousemove(function(e) {
$("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});
});
</script>
</head>
<body>
<div id="container">
<h1>jQuery Tutorial - Pop-up div on hover</h1>
<p>
To show hidden div, simply hover your mouse over
<a href="#" id="trigger">this link</a>.
</p>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up">
<h3>Pop-up div Successfully Displayed</h3>
<p>
This div only appears when the trigger link is hovered over. Otherwise
it is hidden from view.
</p>
</div>
</div>
</body>
</html>
I must thank you for the efforts you've put in penning this website. I'm hoping to see
ReplyDeletethe same high-grade blog posts by you later on as well.
In truth, your creative writing abilities has motivated me to get my own site now ;
)
Feel free to visit my weblog; spielen book