Các bạn copy đoạn code sau vào một file .html sau đó mở file đó lên để xem hiệu ứng:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jquery popup div - Jquery popup div on hover</title>
<meta content="Jquery popup div,Jquery popup" name="keywords">
<meta content="Hiệu ứng popup thẻ DIV khi hover. Jquery popup div - Jquery popup div on hover" name="description">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
div#container {
border: 1px solid #1A1A1A;
margin: 30px auto 0;
padding: 20px;
width: 700px;
}
/* HOVER STYLES */
div.sieuthiwebsitedep_popup_images {
display: none;
position: absolute;
width: 280px;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 1px solid #1a1a1a;
font-size: 90%;
}
.clear{clear:both;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
.intro{}
.seowebchuyennghiep_product{}
.seowebchuyennghiep_product1{float: left;width: 330px;}
</style>
<script type="text/javascript" src="http://sieuthiwebsitedep.com/templates/nicewebmarket/js/jquery.js"></script>
<script type="text/javascript">
function sieuthiwebsitedepPopupImages(id){
var moveLeft = 120;
var moveDown = 20;
//$('a#'+id).hover(function(e) {
$('div#sieuthiwebsitedep_popup_'+id).show();
//.css('top', e.pageY + moveDown)
//.css('left', e.pageX + moveLeft)
//.appendTo('body');
//}, function() {
//$('div#sieuthiwebsitedep_popup_'+id).hide();
//});
$('a#'+id).mousemove(function(e) {
$("div#sieuthiwebsitedep_popup_"+id).css('top', e.pageY + moveDown).css('left', e.pageX - moveLeft);
});
}
function sieuthiwebsitedepHideImages(id){
$('div#sieuthiwebsitedep_popup_'+id).hide();
}
</script>
</head>
<body>
<div id="container">
<h1>Jquery popup div - Jquery popup div on hover</h1>
<p>
Hover vào Images để xem hiệu ứng POPUP thẻ DIV
</p>
<div class="seowebchuyennghiep_product">
<div class="seowebchuyennghiep_product1">
<h3><a href="http://sieuthiwebsitedep.com" title="Công ty thiết kế web chuẩn SEO">Công ty thiết kế web chuẩn SEO</a></h3>
<div class="intro">
<a id="sieuthiwebsitedep_produc1" onmouseover="sieuthiwebsitedepPopupImages(this.id)" onmouseout="sieuthiwebsitedepHideImages(this.id)" href="/" title="Công ty thiết kế web chuẩn SEO"><img alt="Thiết kế web chuẩn SEO" src="http://sieuthiwebsitedep.com/images/seo_images_services/seo.gif" width="200" /></a>
<p>Công ty thiết kế web chuẩn SEO Ngọc Gia Phong chào mừng quý khách đến với dịch vụ Thiết kế website chuyên nghiệp, chất lượng, chuẩn SEO hàng đầu Việt Nam.</p>
</div>
</div>
<div class="seowebchuyennghiep_product1" style="border-left:1px dotted #999;padding-left:10px;margin-left:10px;">
<h3><a href="http://www.seowebchuyennghiep.com/Thiet-ke-website/thiet-ke-website-gia-re-tai-ha-noi.html" title="Thiết kế website giá rẻ tại hà nội">Thiết kế website giá rẻ tại hà nội</a></h3>
<p>
<a id="sieuthiwebsitedep_produc2" onmouseover="sieuthiwebsitedepPopupImages(this.id)" onmouseout="sieuthiwebsitedepHideImages(this.id)" href="/" title="Thiết kế website giá rẻ"><img alt="Thiết kế website giá rẻ" src="http://sieuthiwebsitedep.com/images/seo_images_kienthucwebsite/W3C.jpg" width="200" /></a>
</p>
<p>Công ty thiết kế website uy tín NGỌC GIA PHONG chuyên thiết kế website giá rẻ trọn gói chỉ với 2.5 triệu đã bao gồm Domain và Hosting, bạn đã sở hữu một website được thiết kế chuyên nghiệp, thân thiện google, thiết kế chuẩn SEO, hỗ trợ tạo link thân thiện, tạo thẻ Title và Meta Description..</p>
</div>
<div class="clear"></div>
</div>
<!-- HIDDEN / POP-UP DIV -->
<div style="display: none; top: 256px; left: 324px;" id="sieuthiwebsitedep_popup_sieuthiwebsitedep_produc1" class="sieuthiwebsitedep_popup_images">
<h3><a href="http://sieuthiwebsitedep.com" title="Công ty thiết kế web chuẩn SEO">Công ty thiết kế web chuẩn SEO</a></h3>
<div class="intro">
<img alt="Thiết kế web chuẩn SEO" src="http://sieuthiwebsitedep.com/images/seo_images_services/seo.gif" width="200">
<p>Công ty thiết kế web chuẩn SEO Ngọc Gia Phong chào mừng quý khách đến với dịch vụ Thiết kế website chuyên nghiệp, chất lượng, chuẩn SEO hàng đầu Việt Nam.</p>
</div>
</div>
<div style="display: none; top: 359px; left: 568px;" id="sieuthiwebsitedep_popup_sieuthiwebsitedep_produc2" class="sieuthiwebsitedep_popup_images">
<h3><a href="http://www.seowebchuyennghiep.com/Thiet-ke-website/thiet-ke-website-gia-re-tai-ha-noi.html" title="Thiết kế website giá rẻ tại hà nội">Thiết kế website giá rẻ tại hà nội</a></h3>
<p>
<img alt="Thiết kế website giá rẻ" src="http://sieuthiwebsitedep.com/images/seo_images_kienthucwebsite/W3C.jpg" width="200">
</p>
<p>Công ty thiết kế website uy tín NGỌC GIA PHONG chuyên thiết kế website giá rẻ trọn gói chỉ với 2.5 triệu đã bao gồm Domain và Hosting, bạn đã sở hữu một website được thiết kế chuyên nghiệp, thân thiện google, thiết kế chuẩn SEO, hỗ trợ tạo link thân thiện, tạo thẻ Title và Meta Description..</p>
</div>
</div>
</body>
</html>
Số người đang online: | 248 |
Hôm nay: | 306 |
Hôm qua: | 193 |
Tổng số truy cập: | 550708 |