html文件<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<style type="text/css">
#main div{
position:absolute;
display:none;
}
</style></head><body>
<div id="main" style="z-index:10;">
<h3 id="post-46">
<a href="http://localhost/wordpress/?p=46" rel="book" class="screenshot">移动到这里 1</a>
<div>
这里是内容 1
</div>
</h3></div>
<div id="main" style="z-index:10;">
<h3 id="post-46">
<a href="http://localhost/wordpress/?p=46" rel="book" class="screenshot">移动到这里 2</a>
<div>
这里是内容 2
</div>
</h3></div>
<div id="main" style="z-index:10;">
<h3 id="post-46">
<a href="http://localhost/wordpress/?p=46" rel="book" class="screenshot">移动到这里 3</a>
<div>
这里是内容 3
</div>
</h3>
</div>
</body>
</html>
main.js
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.screenshot").hover(function(e){
//alert($(this).children("h3").css("top"));
$(this).next().css("top", $(this).offset().top+15+"px")
.css("left",$(this).offset().left+25+"px")
.css("margin-top", "0px")
.css("overflow", "hidden")
.css("height", "180px")
.css("width", "492px")
.css("display", "block")
.css("position", "absolute")
.css("background-color", "#F5B392")
.css("z-index", "100")
.fadeIn("fast");
},
function(){
this.title = this.t;
$(this).next().css("display","none")
.css("margin-top", "0px")
.css("overflow", "hidden")
.css("height", "0px")
.css("width", "0px")
.css("position", "absolute")
.css("background-color", "#F5B392")
.css("z-index", "0")
;
});
$("#nr").mouseover(function(){
alert($(this).html());
}, function() {
alert($(this).html());
});
};// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});如何让鼠标移动到div上面的时候div的display属性还是block，当鼠标移动到连接和div外面以后，div才消失
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<style type="text/css">
#main div{
position:absolute;
display:none;
}
</style></head><body>
<div id="main" style="z-index:10;">
<h3 id="post-46">
<a href="http://localhost/wordpress/?p=46" rel="book" class="screenshot">移动到这里 1</a>
<div>
这里是内容 1
</div>
</h3></div>
<div id="main" style="z-index:10;">
<h3 id="post-46">
<a href="http://localhost/wordpress/?p=46" rel="book" class="screenshot">移动到这里 2</a>
<div>
这里是内容 2
</div>
</h3></div>
<div id="main" style="z-index:10;">
<h3 id="post-46">
<a href="http://localhost/wordpress/?p=46" rel="book" class="screenshot">移动到这里 3</a>
<div>
这里是内容 3
</div>
</h3>
</div>
</body>
</html>
main.js
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.screenshot").hover(function(e){
//alert($(this).children("h3").css("top"));
$(this).next().css("top", $(this).offset().top+15+"px")
.css("left",$(this).offset().left+25+"px")
.css("margin-top", "0px")
.css("overflow", "hidden")
.css("height", "180px")
.css("width", "492px")
.css("display", "block")
.css("position", "absolute")
.css("background-color", "#F5B392")
.css("z-index", "100")
.fadeIn("fast");
},
function(){
this.title = this.t;
$(this).next().css("display","none")
.css("margin-top", "0px")
.css("overflow", "hidden")
.css("height", "0px")
.css("width", "0px")
.css("position", "absolute")
.css("background-color", "#F5B392")
.css("z-index", "0")
;
});
$("#nr").mouseover(function(){
alert($(this).html());
}, function() {
alert($(this).html());
});
};// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});如何让鼠标移动到div上面的时候div的display属性还是block，当鼠标移动到连接和div外面以后，div才消失
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.screenshot").hover(function(e){
//alert($(this).children("h3").css("top"));
$(this).next().css("top", $(this).offset().top+15+"px")
.css("left",$(this).offset().left+25+"px")
.css("margin-top", "0px")
.css("overflow", "hidden")
.css("height", "180px")
.css("width", "492px")
.css("display", "block")
.css("position", "absolute")
.css("background-color", "#F5B392")
.css("z-index", "100")
.fadeIn("fast");
},
function(){
this.title = this.t;
$(this).next().css("display","none")
.css("margin-top", "0px")
.css("overflow", "hidden")
.css("height", "0px")
.css("width", "0px")
.css("position", "absolute")
.css("background-color", "#F5B392")
.css("z-index", "0")
;
});
$("a.screenshot").next().hover(function(e){
//alert($(this).children("h3").css("top"));
$(this).css("top", $(this).prev().offset().top+15+"px")
.css("left",$(this).prev().offset().left+25+"px")
.css("margin-top", "0px")
.css("overflow", "hidden")
.css("height", "180px")
.css("width", "492px")
.css("display", "block")
.css("position", "absolute")
.css("background-color", "#F5B392")
.css("z-index", "100")
.fadeIn("fast");
},
function(){
$(this).prev().title = $(this).prev().t;
$(this).css("display","none")
.css("margin-top", "0px")
.css("overflow", "hidden")
.css("height", "0px")
.css("width", "0px")
.css("position", "absolute")
.css("background-color", "#F5B392")
.css("z-index", "0")
;
});
$("#nr").mouseover(function(){
alert($(this).html());
}, function() {
alert($(this).html());
});
};// starting the script on page load
$(document).ready(function(){
screenshotPreview();
});