鼠标移动显示 div 图片文字效果

最新推荐文章于 2023-12-27 17:34:00 发布

原创最新推荐文章于 2023-12-27 17:34:00 发布 · 956 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#div #class #css #ie #qq

这是一个使用CSS和JavaScript实现的鼠标悬停切换div内容的特效。通过修改CSS样式和JavaScript函数`ShowarticleContent`，当鼠标移动到导航栏的某个链接上时，对应的显示内容区域会显示相应的内容，而在其他链接上则隐藏。代码适用于IE和Firefox浏览器，易于扩展和自定义样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

<style type="text/css">
.showbox{
clear:both;
width:500px;/*此处控制显示区域的高度*/
border:1px solid #ff0000;/*此处控制显示外框的颜色*/
border-top-width:0;
height:300px;/*此处控制内容显示区域高度*/
}
.nav_1{
width:500px;
border-left:1px solid #dcdcdc;
list-style:none;
}
.nav_1 li{
width:100px;/*此值控制栏目的宽度*/
float:left;
height:23px;
line-height:23px;
text-align:center;
font-weight:bold;
background-color:#999999;
}
.bg_nav{
background:#FFFFFF url(http://www.99xq.cn/images/onmouseover.gif) no-repeat 0 0;/*此处图片为鼠标移到上面的显示方式*/
}
.bg_nav_current{
background:#FFFFFF url(images/bg_m.jpg) no-repeat 0 0;/*此处图片为鼠标移走后的显示方式*/
}
</style>

</head>
<body>
<script>
function ShowarticleContent(id)
{
  for (var i = 0;i < 5;i++)//注意此处的 5 这个数字,i值从零到四已经有五个数,如果此处等于四,就会出现溢出而无法显示最后一项!
  {
   var articlenav = document.getElementById("articlenav" + i);
   var articlecontent = document.getElementById("articlecontent" + i);
   if (i == id)
   {
    articlenav.className = 'bg_nav';
    articlecontent.style.display = "";
   }
   else
   {
    articlenav.className = 'bg_nav_current';
    articlecontent.style.display = "none";
   }
  }
}
</script>
<div class="nav_1">
  <li onmouseover="ShowarticleContent('0')" id="articlenav0" class="bg_nav">焦点文章</li>
  <li onmouseover="ShowarticleContent('1')" id="articlenav1" class="bg_nav_current">推荐文章</li>
  <li onmouseover="ShowarticleContent('2')" id="articlenav2" class="bg_nav_current">热点文章</li>
  <li onmouseover="ShowarticleContent('3')" id="articlenav3" class="bg_nav_current">久久乡情</li>
   <li onmouseover="ShowarticleContent('4')" id="articlenav4" class="bg_nav_current">乡情后花园</li>
</div>
<div class="showbox">
  <div id="articlecontent0">频道首页焦点文章</div>
  <div id="articlecontent1" style="display:none;">我们还有多少时间</div>
  <div id="articlecontent2" style="display:none;">我们的家</div>
  <div id="articlecontent3" style="display:none;">我们快毕业啦</div>
  <div id="articlecontent4" style="display:none;">我们的phpcms</div>
</div>
此代码在ie 和 ff 下均通过验证(这一点是比较难得的,许多此类效果只能通过ie),您可以放心使用,而且它的扩充不受限制,也就是说您可以添加更多的显示栏目!而这一切都只需要简单的修改,还不心动吗?
要修改样式,您可以修改 css ,上面的说明已经十分详尽了,如果您还有什么不懂的话可以联系我QQ:273698471,欢迎到小站坐坐:<a href="http://www.99xq.cn/" target="_blank">http://www.99xq.cn/</a><br />此代码取自<a href="http://www.phpcms.cn" target="_parent">phpcms官方站</a>,经过我的简单说明相信您一定想试一试吧,那就赶紧了的......
</body>
</html>