JQuery实现鼠标滑过显示下拉列表

最新推荐文章于 2022-10-12 17:27:13 发布

mituan1234567

最新推荐文章于 2022-10-12 17:27:13 发布

阅读量2.9k

点赞数

分类专栏： CSS JavaScript

JavaScript 同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

CSS

31 篇文章 0 订阅

订阅专栏

http://www.aichengxu.com/article/Javascript/276_7.html
当网站导航栏项目很多的时候，我们往往是将同一级目录下的栏目先隐藏起来。当用户的鼠标滑过时则显示出来。这就是用javascript实现的一个导航栏下拉列表。豆芽一步步给大家讲解。值得注意的是我们使用的是Javascript的一个框架Jquery来实现的。所以，你在使用的时候必须要下载Jquery。

先建立HTML代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Jquery test web page</title>
<link rel="stylesheet" href="./css/layout.css" type="text/css" />
<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/basic.js" type="text/javascript"></script>
</head>
<body>
<p id="it">IT业界</p>
<ul id="ul">
<li>百度</li>
<li>谷歌</li>
<li>网易</li>
<li>腾讯</li>
<li>淘宝</li>
</ul>
</body>
</html>

这条代码是包含Jquery库：
<script src="./js/jquery.js" type="text/javascript"></script>

这里我们将CSS和JS文件单独放在一个外部文件中。
layout.css文件的代码为：
@CHARSET "GBK";
body{
font:12px Arial,Verdana;
}
ul{
margin:0px;
padding:0px;
list-style-type:none;
}
#it{
margin:0px;
width:80px;
height:25px;
color:white;
text-align:center;
line-height:25px;
cursor:pointer;
background:black;
border:1px solid white;
}
#ul li{
width:80px;
height:25px;
color:white;
text-align:center;
line-height:25px;
cursor:pointer;
background:black;
border:1px solid white;
}
.highLight{
width:80px;
height:25px;
background:white;
border:1px solid blue;
color:black;
}

CSS代码大家可以根据自己喜欢的样式来设计，这里豆芽重要来解释JS文件。

$(document).ready(function (){
$('#ul').hide(); //打开页面隐藏下拉列表
$('#it').hover( //鼠标滑过导航栏目时
   function(){
     $('#ul').show(); //显示下拉列表
     $(this).css({'color':'red','background-color':'orange'}); //设置导航栏目样式，醒目
    },
   function(){
     $('#ul').hide(); //鼠标移开后隐藏下拉列表
     }
   );
$('#ul').hover( //鼠标滑过下拉列表自身也要显示，防止无法点击下拉列表
   function(){
    $('#ul').show();
   },
   function(){
    $('#ul').hide();
    $('#it').css({'color':'white','background-color':'black'}); //鼠标移开下拉列表后，导航栏目的样式也清除
    }
   );
$('li').hover( //鼠标滑过下拉列表是改变当前栏目样式
   function(){
    $(this).css({'color':'red','background-color':'orange'});
    },
   function(){
    $(this).css({'color':'white','background-color':'black'});
    }
   );
});

因为目前网站编辑器的问题还无法上传图片，没有图片大家自己先到本地测试看看效果吧。
来源：豆芽博客,地址：http://www.aichengxu.com/article/Javascript/276_7.html保留原文链接,是开源分享的开始.

mituan1234567

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现鼠标滑过显示下拉列表

http://www.aichengxu.com/article/Javascript/276_7.html当网站导航栏项目很多的时候，我们往往是将同一级目录下的栏目先隐藏起来。当用户的鼠标滑过时则显示出来。这就是用javascript实现的一个导航栏下拉列表。豆芽一步步给大家讲解。值得注意的是我们使用的是Javascript的一个框架Jquery来实现的。所以，你在使用的时候必须要下载Jqu
复制链接

扫一扫