hover伪类的demo

最新推荐文章于 2022-10-17 14:36:25 发布
最新推荐文章于 2022-10-17 14:36:25 发布
阅读量144 收藏
点赞数
分类专栏： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44788119/article/details/109607914
版权

效果
在这里插入图片描述点击
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" herf="css/font-awesome.min.css">
		<style>
        *{
			margin: 0px;
			padding: 0px;
		}
		ul{
			list-style-type: none;
		}
        a{
			text-decoration: none;
		}
		.header-area .header-top .container {
			width: 1000px;
			background-color:#f3f4f4;
			margin-left: auto;
			margin-right: auto;
		}
		.header-area .header-top .container .menu-list{
			text-align: right;
		}
		.header-area .header-top .container .menu-list>li{
			display: inline-block;
			margin-right: 15px;
			position:relative;
			
		}
		.header-area .header-top .container .menu-list>li .drop-list{
			position: absolute;
			top:20px;
			background-color:#f3f4f4 ;
			min-height: 60px;
			min-width: 60px;
			display: none;
		}
		.header-area .header-top .container .menu-list>li .drop-list li{
			text-align: center;
			margin-bottom: 10px;
		}
		.header-area .header-top .container .menu-list>li .drop-list li:first-child{
            margin-top: 10px;
		}
		.header-area .header-top .container .menu-list>li:hover .drop-list{
			display: block;
		}
		.header-area .header-top .container .menu-list>li .drop-list li:hover a{
			text-align: center;
			margin-bottom: 10px;
			color: #004700;
			font-size: 18px;
		}
		</style>
	</head>
	<body>
		<div class="header-area">
			<div class="header-top">
				<div class="container">
					<ul class="menu-list">
						<li>
							<a href="" herf="javascript:;">账户</a>
							<ul class="drop-list">
								<li><a href="javascript:;">设置</a></li>
								<li><a href="javascript:;">购物车</a></li>
								<li><a href="javascript:;">清单</a></li>
							</ul>
						</li>
						<li>
							<a href="" herf="javascript:;">人民币</a>
						</li>
						<li>
							<a href="" herf="javascript:;">中文</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="header-middim"></div>
			<div class="header-bottom"></div>
		</div>
	</body>
</html>
笔描相思
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3的一个小demo（箭头hover变化）
aowco3653的博客
05-10 153
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <style type="text/css"> 6 a{text-decoration: none; 7 color: #EE7A...
jQuery hover demo
weixin_30364325的博客
07-03 56
先放效果图： 百度云下载地址：http://pan.baidu.com/s/1dDpn1Sl 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
css hover 小demo
weixin_30675967的博客
08-07 65
照片hover: 小动画 <div id='facebook'><span><img src=""><i></i></span></div> <style type="text/css"> #facebook span { width: 38px; display: inlin...
【Android Demo】悬浮窗体实现
02-09 114
突然对悬浮窗体感兴趣，查资料做了个小Demo，效果是点击按钮后，关闭当前Activity，显示悬浮窗口，窗口可以拖动，双击后消失。效果图如下： 它的使用原理很简单，就是借用了WindowManager这个管理类来实现的。1.首先在AndroidManifest.xml中添加使用权限： <uses-permission android:name="android.perm...
css 背景效果_软件技术：我写CSS的常用套路(附demo的效果实现与源码）
weixin_39577908的博客
11-20 606
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。1、交错动画有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟(delay)这一属性。举个栗子，...
css动画 伪类基础使用实例
02-28
在提供的“19个超酷菜单”示例中，每个菜单可能利用了不同的CSS技巧，比如使用`transition`属性实现平滑过渡，或者通过伪类`:hover`、`:focus-within`等改变菜单项在不同状态下的样式。此外，可能还涉及到了`display...
Demo.rar_DEMO_按钮 背景
09-24
此外，还可以通过伪类如`:hover`, `:active`, 和`:focus`来改变鼠标悬停、点击或获得焦点时的背景色，从而增强交互反馈。 除了颜色，背景还可以包含渐变、图案或图片。例如，使用线性或径向渐变可以创建深度感或...
tuofang_demo_js.rar_DEMO
09-21
例如，使用`:hover`伪类来改变鼠标悬停时的样式，或者使用JavaScript动态修改元素的`opacity`或`transform`属性来模拟拖动效果。 总之，"tuofang_demo_js.rar_DEMO"是一个关于JavaScript实现拖放功能的实例，它将...
cssDemo
03-10
这包括标签选择器（如`p`，`div`），类选择器（`.class`），ID选择器（`#id`），属性选择器（`[attr]`），以及更复杂的组合选择器和伪类选择器（`:hover`，`:active`等）。 2. **盒模型**: CSS盒模型是理解元素尺寸...
demo
03-30
5. **伪类和伪元素**：CSS的伪类（如`:hover`, `:active`, `:focus`, `:nth-child()`)和伪元素（如`::before`, `::after`）用于为元素的不同状态或添加额外的内容提供样式。 6. **动画和过渡**：CSS3的`@keyframes`...
html5伪类效果延缓,CSS3实现伪类hover离开时平滑过渡效果
weixin_31005543的博客
06-03 524
由于hover伪类添加的动画效果，仅当鼠标放在元素上时会被触发，而当鼠标离开时，效果会中断，会显得很生硬。大多数人的想法都是使用js的onmouseover和onmouseleave事件来实现动画效果。其实不必这么麻烦，CSS3便可以帮你解决这些问题。离开时效果生硬div{width: 100px;height: 100px;border:1px solid;margin:0px auto;mar...
CSS3实现的一批hover特效
OrangeJ
08-10 4406
本特效的原版是codepen上面的hover.css项目，个人很喜欢所以把所有的hover特效自己也写了一遍，上传文件麻烦所以直接把css整合到HTML代码中了，代码复制下来保存后即可用浏览器打开浏览。 Hover .container { margin: 0 auto; w
css3 :hover添加特效
qq_30486009的博客
06-21 3796
为改变hover动画效果，可以为hover添加transition 增加过度效果 1、第一种写法（事件前有动画效果）： style> body{ padding: 100px} .demo{ width: 100px; height: 100px; background-color: blu
vue学习第三篇
qq_44788119的博客
02-07 2036
1：element组件中清空文本框的内容 使用clearable属性即可得到一个可清空的输入框 通过给输入框绑定clear事件，在点击由 clearable 属性生成的清空按钮时触发 2：dialog对话框中属性解析 visible.sync属性：布尔值，表示对话框的显示和隐藏 titile：标题 3：表单验证的重要属性 ：model：为表单绑定数据对象 ：rulse:验证规则 ：ref:引用名称 4：自定义表单验证 首先在data中写正则表达式 然后：通过validator引入过来 5:等级渲染标签是
WebRTC的基本概念
qq_44788119的博客
10-17 955
转发的协议被定义为TURN。STUN：NAT的UDP简单的网络协议，它允许位于NAT后的客户端找出自己的公网地址，查出自己位于那种类型的NAT之后，以及NAT为某一个本地端口绑定的Internet端端口。问题：STUN并不是每次都能够成功的为需要的NAT的通话设备分配IP地址的，P2P在传输媒体流时，使用本地带宽，在多人音视频通话的过程中，通话质量好坏往往需要根据使用者本地带宽确定。信令服务器除了交换网络协商信息和媒体协议信息，比如房间的管理，音视频播放的音乐信息，进度条信息等都需要通过信令服务器实现。
前端计算机网络常见面试题目总结
qq_44788119的博客
07-20 918
1：说一下 http 和 https http：是超文本传输协议，是目前互联网运用最为广泛的协议，他主要是服务器和客户端传输获取数据的一个桥梁，http是明文传输，如果攻击者窃取了服务器和客户端传输的报文，很容易被读懂，因此http不适合传输比较铭感的信息。 https:安全套接字层超文本传输协议HTTPS，就是在http基础上加入了ssl层,就是通过ssl对数据进行了加密，因此https要比http安全。 2：http的缺点 1：通信使用明文，内容可能被窃取 2：不验证通信方的身份容易遭遇伪装 3：无法证
canvas学习第一篇
qq_44788119的博客
04-21 855
一：绘制图形 1:绘制一个实心长方形 ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect(10, 10, 55, 50); 2:绘制一个矩形的边框 ctx.fillStyle = "rgb(200,0,0)"; ctx.strokeRect(10, 10, 55, 50); 3:清除指定矩形区域，让清除部分完全透明。 clearRect(x, y, width, height) 4:案例 var canvas = document.getElementB
vite的学习笔记
qq_44788119的博客
08-29 852
vite先读取main.js中引入的index.css文件，直接使用fs模块读取index.css中的文件内容，创建一个style标签，将index.css中的文件内容直接copy进style标签里，然后将style标签插入到index.html的head中，将该css文件中的内容直接替换为js脚本，同时设置（Content-Type)为js，从而让浏览器以js脚本的形式来执行css后缀的文件。当我们在协同开发的时候，两个人开发用了相同的类名，这样导致了样式的覆盖，为了解决这个问题需要用到css模块化。..
scss中使用hover伪类
最新发布
08-23
在 SCSS 中使用:hover 伪类非常简单。你只需要为你想要应用 :hover 伪类的元素定义一个样式块，并在其内部使用 :hover 伪类即可。 以下是一个示例： ```scss .element { // 默认样式 color: #000; // :hover ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值