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

2019/6/29 22:42:26

编程Tag： jQuery 下拉列表鼠标滑过

本文主要是介绍JQuery实现鼠标滑过显示导航下拉列表，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

当网站导航栏项目很多的时候，我们往往是将同一级目录下的栏目先隐藏起来。当用户的鼠标滑过时则显示出来。这就是用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库：

复制代码代码如下:

这里我们将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'}); 
} 
); 
}); 

因为目前网站编辑器的问题还无法上传图片，没有图片大家自己先到本地测试看看效果吧。

这篇关于JQuery实现鼠标滑过显示导航下拉列表的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章