<!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>JS鼠标滑过改变标签显示内容 - 网页模板</title>
<style type="text/css">
@charset "utf-8";
/* 全局样式 */
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, big, cite, code, del, em, font, img, ins, small, strong, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button, input, textarea, table, th, td { padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 12px; font-weight: normal; }
div { margin: 0 auto; }
body { background: url(../images/bg.jpg); }
div { text-align: left; }
a img { border: 0; }
table { border-collapse: collapse; border-spacing: 0; }
select, input, textarea { font: 12px "宋体"; outline: none; }
body { color: #333; text-align: center; font: 12px "宋体"; }
ul, ol, li { list-style-type: none; vertical-align: 0; }
a { outline-style: none; color: #333; text-decoration: none; }
a, area { blr:expression(this.onFocus=this.blur())
}
:focus { -moz-outline-style: none; }
.clear { clear: both; }
.hidden { display: none; }
.block { display: block; }
.ht10px { height: 10px; font-size: 0px; line-height: 0px; }
.ht4px { height: 4px; font-size: 0px; line-height: 0px; }
.left { float: left }
.right { float: right }
.changeList { height: 239px; width: 248px; margin-top: 10px; border: 1px #dddddd solid; font-family: Arial; }
.changeList-top { background: url(images/scTitleGg.gif) no-repeat top; height: 37px; width: 248px }
.changeList dt { display: block; height: 37px; width: 236px; padding-left: 10px; text-align: left; line-height: 37px; float: left; background-color: #efefef; margin-left: 1px; margin-bottom: 1px; background: url(images/shuBg.gif) repeat-x top; }
.changeList dt p { float: left; color: #757575; }
.changeListText { float: left; height: 41px; width: 200px; margin-left: 10px; padding-top: 8px; text-align: left; }
.changeListText a { line-height: 18px; color: #FFF; }
.changeList dd { float: left; height: 49px; width: 246px; margin-bottom: 1px; display: block; background-color: #c20000; margin-left: 1px; cursor: pointer; }
.changeList h1 { display: block; float: right; height: 49px; width: 29px }
.changeList em { float: right; height: 37px; width: 29px; display: block }
</style>
<script type="text/javascript">
function changebox(n) {
var i = 1;
while(true){
try{
document.getElementById("a"+i).style.display = 'none';
document.getElementById("b"+i).style.display = 'block';
}
catch(e){
break;
}
i++;
}
document.getElementById("a"+n).style.display = 'block';
document.getElementById("b"+n).style.display = 'none';
}
</script>
</head>
<body>
<div class="changeList">
<div class="changeList-top"></div>
<dl>
<dt id="b1" style="display:none" onmouseover="changebox(1);">
<p>网站公告网页特效...</p>
<em><img src="images/shu1.gif" width="29" height="37"/></em></dt>
<dd id="a1">
<h1><img src="images/shu1_1.gif" width="29" height="49" /></h1>
<div class="changeListText"><a href="http://www.internetke.com" target="_blank">www.moobnn.com为广大IT朋友提供实用的js网页特效代码!</a></div>
</dd>
</dl>
<dl>
<dt id="b2" onmouseover="changebox(2);">
<p>网页特效集锦-网页模板网页特效...</p>
<em><img src="images/shu2.gif" width="29" height="37"/></em></dt>
<dd id="a2" style="display:none;">
<h1><img src="images/shu1_2.gif" width="29" height="49" /></h1>
<div class="changeListText"><a href="http://www.moobnn.com/?m7_js_mode2_55.html" target="_blank">Js/jQuery上下箭头渐变图文切换(多张)相册特效</a></div>
</dd>
</dl>
<dl>
<dt id="b3" onmouseover="changebox(3);">
<p>新闻列表滑过网页特效...</p>
<em><img src="images/shu3.gif" width="29" height="37"/></em></dt>
<dd id="a3" style="display:none;">
<h1><img src="images/shu1_3.gif" width="29" height="49" /></h1>
<div class="changeListText"><a href="http://www.moobnn.com/?m7_js_mode2_54.html" target="_blank">纯Js/jQuery多图片左右渐变轮播展示相册</a></div>
</dd>
</dl>
<dl>
<dt id="b4" onmouseover="changebox(4);">
<p>鼠标滑过改变标签内容...</p>
<em><img src="images/shu4.gif" width="29" height="37"/></em></dt>
<dd id="a4" style="display:none;">
<h1><img src="images/shu1_4.gif" width="29" height="49" /></h1>
<div class="changeListText"><a href="http://www.moobnn.com/?m7_js_mode2_53.html" target="_blank">Js/jQuery带左右箭头+按钮弹性滑动焦点图</a></div>
</dd>
</dl>
<dl>
<dt id="b5" onmouseover="changebox(5);">
<p>网页模板-北京网站建设、网站制作</p>
<em><img src="images/shu5.gif" width="29" height="37"/></em></dt>
<dd id="a5" style="display:none;">
<h1><img src="images/shu1_5.gif" width="29" height="49" /></h1>
<div class="changeListText"><a href="http://www.moobnn.com/?m7_js_mode2_52.html" target="_blank">js/jQuery仿腾讯/新浪图片展示网页特效</a></div>
</dd>
</dl>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源:<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>