懂JQERY的请帮忙？

庄子 2009-12-19 11:08:55

1. 当鼠标HOVER在“页面广告”上时，相应的网站可以弹出来，但是当鼠标HOVER在“图片娱乐”时，相应的图片不能出现，即时换成网站也不能出现
2.当鼠标放在弹出的页面上时，弹出的页面也会HIDE，希望是当离开弹出的页面时，才HIDE
以下是程序
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("body").html($("body").html().replace(/新闻/g, "<a href='http://www.sina.com'>新闻</a>"));
});
</script>
<script type="text/javascript">
$(function() {
//将鼠标移动到"强国"上的内容添加到body中，也可以直接写在body中
$("body").append("<div id='class2' style='display:none;position:absolute;'><img src='/images/video/video06.gif'/></div>");
//为所有的"强国"分别添加css样式"qiangguo"
$("body").html($("body").html().replace(/图片娱乐/g, "<a href='http://www.sohu.com' class='class2'>图片娱乐</a>"));
//为所有css样式包含"qiangguo"的元素添加hover事件
$(".class2").hover(function() {
$("#class2").css({left: $(this).position().left, top: parseInt($(this).position().top) + 13});
$("#class2").show();
}, function() {
$("#class2").hide();
});
});
</script>

<script type="text/javascript">
$(function() {
//将鼠标移动到"强国"上的内容添加到body中，也可以直接写在body中
$("body").append("<div id='class3' style='display:none;width:400px;height:400px;position:absolute;'><iframe src='http://www.qq.com' width='400' height='400'></iframe></div>");
//为所有的"强国"分别添加css样式"qiangguo"
$("body").html($("body").html().replace(/页面广告/g, "<a href='http://www.qq.com' class='class3'>页面广告</a>"));
//为所有css样式包含"qiangguo"的元素添加hover事件
$(".class3").hover(function() {
$("#class3").css({left: $(this).position().left, top: parseInt($(this).position().top) + 13});
$("#class3").show();
}, function() {
$("#class3").hide();
});
});
</script>
</head>
<body>
战略意义页面广告强国xxxxxxxxxxx强国强国xxxxxxxxxxx强国强国xxxxxxxxxxx强国强国xxxxxxxxxxx强国强国xxxxxxxxxxx强国强国xxxxxxxxxxx强国强国xxxxxxxxxxx强国强国图片娱乐xxxxxxxxxxx强国强国xxxxxxxxxxx强国中国
战略意义强国新闻xxxxxxxxxxx强国
</body>
</html>

...全文

76 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

junshanhudazhaxi 2009-12-21

打赏
举报

<!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=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

<script type="text/javascript"> 

$(function() { 

    $("body").html($("body").html().replace(/新闻/g, " <a href='http://www.sina.com'>新闻 </a>")); 

	

	$("body").append("<div id='class2' style='display:none;position:absolute;width:400px; height:400px;'> <img src='/images/video/video06.gif'/> </div>");  

	$("body").html($("body").html().replace(/图片娱乐/g, " <a href='http://www.sohu.com' class='class2'>图片娱乐 </a>")); 



    $("body").append(" <div id='class3' style='display:none;width:400px;height:400px;position:absolute;'> <iframe src='http://www.qq.com' width='400' height='400'> </iframe> </div>");  

    $("body").html($("body").html().replace(/页面广告/g, " <a href='http://www.qq.com' class='class3'>页面广告 </a>")); 

	

	//主要是把css样式为class2和class3的标签的hover事件合并。

    $(".class2, .class3").hover(function() { 

		var thisClass = $(this).attr("class");

        $("#" + thisClass).css({left: $(this).position().left, top: parseInt($(this).position().top) + 13});

        $("#" + thisClass).show();

    }, function(e) {

		var thisClass = $(this).attr("class");	

		if (!$(e.relatedTarget).parents().hasClass(thisClass) && !$(e.relatedTarget).hasClass(thisClass) && $(e.relatedTarget).parents().attr("id") != thisClass) {

	        $("#" + thisClass).hide(); 

		}

    });

	

	$("#class2, #class3").mouseout(function(e) {

		var thisID = $(this).attr("id");

		if (!$(e.relatedTarget).parents().hasClass(thisID) && !$(e.relatedTarget).hasClass(thisID) && $(e.relatedTarget).parents().attr("id") != thisID) {

	        $(this).hide(); 

		}

	});

	

}); 

</script> 

</head> 

<body> 

战略意义页面广告强国xxxxxxxxxxx强国强国xxxxxxxxxxx强国强国xxxxxxxxxxx强国强国xxxxxxxxxxx强国强国 xxxxxxxxxxx强国强国xxxxxxxxxxx强国强国xxxxxxxxxxx强国强国图片娱乐xxxxxxxxxxx强国强国 xxxxxxxxxxx强国中国 

战略意义强国新闻xxxxxxxxxxx强国 

</body> 

</html>