jquery导航菜单「建议收藏」

全栈程序员-站长 • 2022年7月26日下午12:36 • 未分类 • 阅读 3

jquery导航菜单「建议收藏」*{ margin:0; padding:0; } ul{ width:800px; overflow:hidden; background-color:#000000; position:relative; margin:0auto; } li{ position:relative; …

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

	*{
				margin: 0;
				padding: 0;
			}
			ul{
				width: 800px;
				overflow: hidden;
				background-color: #000000;
				position: relative;
				margin: 0 auto;
			}
			li{
				position: relative;
				z-index: 100;
				list-style: none;
				float: left;
				padding: 12px 24px;
				color: white;
				font-size: 16px;
			}
			/*悬浮的背景颜色*/
			.active{
				background-color: red;
			}
			#hoveract{
				position: absolute;
				width: 80px;
				height: 45px;
				background-color: red;
			}

<body>
		<ul>
			<li class="active">首页</li>
			<li>新闻</li>
			<li>社会新闻</li>
			<li>汽车</li>
			<li>家居</li>
			<li>社会新闻</li>
			<li>汽车</li>
			<li>家居</li>
			<div id="hoveract"></div>
		</ul>
	</body>

<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$("li").on("mouseover",function(){
			var whid=$(this).outerWidth()
			$('#hoveract').stop();
			$('#hoveract').animate({left:$(this).position().left,width:whid},'linear')
		})
		$("ul").on("mouseout",function(){
			$('#hoveract').stop();
			$('#hoveract').animate({left:0,width:$("li").eq(0).outerWidth()},'linear')
		})
	</script>

在这里插入图片描述

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/159432.html原文链接：https://javaforall.net

赞 (0)

全栈程序员-站长

0 0

解决win10状态栏的搜索框无法搜索本地应用或无反应

解决win10状态栏的搜索框无法搜索本地应用或无反应今天突然出现的问题，在状态栏左下角的搜索框搜索OneNote没有任何反应，对，就是这个地方。最后在另一篇博客上找到了答案，那篇博客也是在知乎找到的答案，虽然是用被人的方法解决了问题，但我还是打算记下来；1、首先，打开管理员命令窗口，win+x，可以看到弹出一个窗口，打开windowsPowershell（管理员）如图2，输入下面这行英文startpowershell然…

全栈程序员-站长
2022年6月4日
griddata方法使用插值方法

griddata方法使用插值方法’linear’Linearinterpolation(default)双线性插值’cubic’Cubicinterpolation双三次插值’natural’Naturalneighborinterpolation 自然邻近插值’nearest’Nearestneighborinterpolation最近邻近插值’v4’MATLAB®4grid

全栈程序员-站长
2022年5月26日
Sublime Text3 的 Markdown 实时预览全面总结

Sublime Text3 的 Markdown 实时预览全面总结如前文《SublimeText3的插件管理工具(PackageControl)的安装及使用方法》所说，Sublime有强大的插件扩展功能，本文介绍如何在用Sublime写Markdown文档时，做到效果预览。1.插件介绍先介绍两个有关Markdown的常用插件：MarkdownEditing和MarkdownPreviewMarkdownEditing顾名思义，Ma…

全栈程序员-站长
2022年7月27日
【uva 1153】Keep the Customer Satisfied（算法效率–贪心+优先队列）

【uva 1153】Keep the Customer Satisfied（算法效率–贪心+优先队列）

全栈程序员-站长
2022年2月22日
关于智慧小区平台发展的看法和建议_智慧社区的现状及发展趋势

关于智慧小区平台发展的看法和建议_智慧社区的现状及发展趋势关于智慧小区平台发展的看法本系列文章由ex_net（张建波）编写，转载请注明出处。http://blog.csdn.net/ex_net/article/details/9003098作者：张建波邮箱：281451020@qq.com电话：13577062679欢迎来电交流！前言平台概念：安保平台、社区服务平台中国未来城市发展方向：1、清洁能源；2、资源的循…

全栈程序员-站长
2022年8月31日
Linux内核的整体架构

Linux内核的整体架构1.前言本文是“Linux内核分析”系列文章的第一篇，会以内核的核心功能为出发点，描述Linux内核的整体架构，以及架构之下主要的软件子系统。之后，会介绍Linux内核源文件的目录结构，并和各个软件子系统对应。注：本文和其它的“Linux内核分析”文章都基于如下约定： a)内核版本为Linux3.10.29（该版本是一个longterm的版本，会被Linux社区持续维

全栈程序员-站长
2022年7月23日

发表回复

关注全栈程序员社区公众号