鼠标滑动经过标题时显示详细介绍内容信息的导航菜单js特效

稿源：互联网 2018-09-21 01:41:22 点击： 24470 撤稿纠错

鼠标滑动经过标题时显示详细的内容介绍信息js特效

以下讨论的是和滑动导航菜单特效相关的鼠标滑动经过标题时显示详细介绍内容信息的导航菜单js特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>阿里西西js特效演示 js.alixixi.com demo</title>
<SCRIPT type="text/javascript" src="http://www.alixixi.com/script/jquery-1.8.3.min.js"></SCRIPT>
<script>
$(document).ready(function() {
 var a = $("#list li");
 a.bind("mouseover",function() {
  a.removeClass("show");
  $(this).addClass("show");
 });
});
</script>
<style>
ul, li, h3 {margin:0px;padding:0px;list-style-type:none;}

ul {width:300px;}
li {height:24px;overflow:hidden;line-height:24px;font-size:12px;padding:0px 10px;}
li h3 {font-size:14px;}
li.show {height:48px;background-color:#ccc;}
</style>
</head>

<body>
<ul id="list">
 <li class="show"><h3>标题</h3><span>阿里西西</span></li>
 <li><h3>标题</h3><span>js.alixixi.com</span></li>
 <li><h3>标题</h3><span>副标题</span></li>
 <li><h3>标题</h3><span>副标题</span></li>
 <li><h3>标题</h3><span>副标题</span></li>
 <li><h3>标题</h3><span>副标题</span></li>
 <li><h3>标题</h3><span>副标题</span></li>
</ul>
</body>
</html>

关于鼠标滑动经过标题时显示详细介绍内容信息的导航菜单js特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018092186195.shtml方便下次再访问哦。

·上一篇： JQUERY实现可以进行多等奖项及多人抽奖结果的随机抽奖特效
·下一篇： 鼠标悬停后带下滑动图片展示的导航菜单js特效代码

鼠标滑动经过标题时显示详细介绍内容信息的导航菜单js特效

文章分类LIST >>返回首页

最新游戏

最新新闻