jquery 悬浮框问题，各位帅哥、美女帮帮忙！

cnjzy0106 2009-07-14 09:30:38

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="bookmark" 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="bookmark" 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="bookmark" 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才消失

...全文

570 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

浪尖赏花 2009-07-14

打赏
举报

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")

        ;

    });

    $("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();

});