Hi Friends...
This is an easy tutorial suitable for those fairly new to jQuery. This tutorial will teach you how to create a simple pop-up effect, showing a hidden div, when you hover over the trigger link.jQuery Tutorial - Pop-up div on hover
This is an easy tutorial suitable for those fairly new to jQuery. This tutorial will teach you how to create a simple pop-up effect, showing a hidden div, when you hover over the trigger link.
I am Pop-up div
I only appears when the trigger link is hovered over. Otherwise I will Disappear.Your Code is as under
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Tutorial - Pop-up div on hover</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background: #fff;
color: #000;
}
h1, h3 {
margin: 0;
padding: 0;
font-weight: normal;
}
a {
color: #ff6a00;
}
div#container {
width: 285px;
margin: 50px auto 0 auto;
padding: 20px;
background: #fff;
border: 1px solid #1a1a1a;
}
div#pop-up {
display: none;
position: absolute;
width: 275px;
padding: 10px;
background: #fff;
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();
}, 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>Pop-up div on hover</h1>
<p>
hover your mouse over
<a href="#" id="trigger">Hover Me</a>.
</p>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up">
<h3>I am Pop-up div </h3>
<p>
I only appears when the trigger link is hovered over. Otherwise
I will Disappear.
</p>
</div>
</body>
</html>
Thank You !
0 comments:
Post a Comment