HTML、CSS实现小米商城鼠标悬停

最新推荐文章于 2024-05-31 15:07:56 发布
最新推荐文章于 2024-05-31 15:07:56 发布
阅读量373 收藏 9
点赞数 7
文章标签： html css tensorflow
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65321031/article/details/135155481
版权

实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="1.css" />
	</head>
	<body>
		<section class="content">
		    <!-- 有菜单 -->
		    <div class="items">
		        <div class="menu">
		            <span>手机</span>
		            <div class="drop">
		                <div class="drop1">Xiaomi MIX系列</div>
		                <div class="drop2">Xiaomi 数字系列</div>
		                <div class="drop3">Xiaomi Civi系列</div>
						<div class="drop1">Redmi K系列</div>
						<div class="drop2">Redmi Note系列</div>
						<div class="drop3">Redmi 数字系列</div>
		            </div>
		        </div>
		    </div>
		    <!-- END -->
		
		    <!-- 无下级 -->
		    <div class="items">
		        <div class="menu">
		            <span>电视</span>
		            <div></div>
		        </div>
		    </div>
		    <div class="items">
		        <div class="menu">
		            <span>家电</span>
		            <div></div>
		        </div>
		    </div>
		    <div class="items">
		        <div class="menu">
		            <span>笔记本</span>
		            <div></div>
		        </div>
		    </div>
			<div class="items">
			    <div class="menu">
			        <span>出行 穿戴</span>
			        <div></div>
			    </div>
			</div>
			<div class="items">
			    <div class="menu">
			        <span>耳机 音箱</span>
			        <div></div>
			    </div>
			</div>
			<div class="items">
			    <div class="menu">
			        <span>健康 儿童</span>
			        <div></div>
			    </div>
			</div>
			<div class="items">
			    <div class="menu">
			        <span>生活 箱包</span>
			        <div></div>
			    </div>
			</div>
			<div class="items">
			    <div class="menu">
			        <span>智能路由器</span>
			        <div></div>
			    </div>
			</div>
			<div class="items">
			    <div class="menu">
			        <span>电源 配件</span>
			        <div></div>
			    </div>
			</div>
		    <!-- END -->
		</section>

	</body>
</html>

.content {
	display: flex;
	flex-direction: column;
}
.items {
	width: 130px;
	color: white
}

.menu{
	width: 100%;
	height: 45px;
	background: silver;
	line-height: 45px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.menu:hover{
	overflow: visible;
	background: orangered;
	color: white;
	z-index: 999;
	cursor: pointer;
}
.drop{
	background: white;
	text-align: center;
	width: 100%;
	height: 45x;
	line-height: 45px;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 100%;
	color: black;
	
}
.drop:hover{
	background:white;
	cursor: pointer;
}
.drop1:hover{
	background: white;
	text-align: center;
	color: orange
}
.drop2:hover{
	background: white;
	text-align: center;
	color: orange
}
.drop3:hover{
	background: white;
	text-align: center;
	color: orange
}

运行结果

鼠标悬停效果图

鼠标悬停子菜单效果图

王陆川
关注
  • 7
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html 鼠标悬停列表,鼠标悬停上 CSS 表样式
weixin_31688273的博客
06-04 548
css*,*:before,*:after {box-sizing: border-box;}body {font-family: Open Sans, sans-serif;font-size: 13px;margin: 20px;text-align: center;text-transform: uppercase;color: #000;background-color: #FFF;}h1...
html列表鼠标悬停,如何将鼠标悬停在一个列表的元素上并显示另一个列表的元素？...
weixin_42321086的博客
06-04 1334
因此，要获得悬停工作，你会式 “.OUTPUT礼”如果您根本无法更改标记，则需要使用.index()方法找出悬停元素的索引，然后将其与您想要显示的元素的索引关联起来。请注意，如果您尝试制作下拉菜单效果，则当您将鼠标从主菜单项移开时，您不希望隐藏输出部分，或者您无法点击在子菜单上。考虑到这一点，它几乎与a question I answered a few days ago中的要求相同。以下是我为该...
如何使用 CSS 在鼠标悬停时显示和隐藏下拉菜单
最新发布
qq_25153359的博客
05-31 625
如何使用 CSS 在鼠标悬停时显示和隐藏下拉菜单
案例 列表目录 鼠标悬停 讲解
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
09-21 441
所谓爱情，应该是什么样子：轰轰烈烈，不顾一切，算不算爱情；相濡以沫，执手到老，算不算爱情；平淡如水，相敬如宾，算不算爱情。真正的爱情，应该是两个人，彼此理解，互相尊重，不缠绕，不牵绊，不占有，然后相伴，走过一段漫长的，旅程。设置另一个列表目录（与前面的列表目录重合），设置背景为 前面的列表目录鼠标悬停时候的 蓝色效果；当鼠标悬停在某个一列表目录上面的时候，这个列表目录有相应的蓝色效果，其他的被隐藏。
鼠标悬停效果显示二级列表
jasmyn518的博客
12-09 3555
加载页面时显示一级列表，鼠标悬停时显示二级列表，离开时隐藏。 HTML代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>list</title> <link rel="stylesheet" href="list.css"> </head> <body> <ul id="title"> <l
html如何悬停出现多个下列表,HTML：悬停表列[复制](html: hover table column [duplicate]...
weixin_39761696的博客
06-09 212
这个问题已经在这里有一个答案：的cols，colgroups和css：悬停psuedoclass 5个回答我怎样才能改变一个HTML表格列的背景列当鼠标移动到它？优选的CSS只。Answer 1:只对单元格或行，对不起。 例如td {background-color: blue;}td:hover {background-color: red;}还有的JavaScript的解决方案，但没有在CS...
html+css实现仿小米商城主页
01-05
在本项目中，我们主要探讨如何使用HTML和CSS技术来创建一个类似小米商城的静态主页。HTML（HyperText Markup Language）是网页内容的基础结构语言，而CSS（Cascading Style Sheets）则是用于定义这些内容样式的关键...
html+css制作小米官网
07-18
在实践中，可能会用到`flexbox`或`grid`布局来实现导航栏的水平居中，使用伪类（`:hover`）添加鼠标悬停效果，以及使用媒体查询确保在不同设备上导航栏的表现。 总之，通过模仿制作小米官网，学习者可以掌握HTML的...
小米商城（html+css+js）
06-29
【小米商城（html+css+js）】是一个典型的前端开发项目，主要采用了HTML、CSS和JavaScript这三种核心技术来构建一个电子商务平台的静态页面。对于学习Web开发的学生来说，这是一个很好的实践案例，可以用来理解网页...
小米商城html项目实战，js+css+html
12-12
例如，你可以用CSS选择器来选中特定的HTML元素，并应用样式，如`.header`定义头部的背景色，`.product`设置商品卡片的样式，`.hover-effect`实现鼠标悬停时的效果。此外，媒体查询（@media query）将帮助我们实现...
css+div实现小米商城主界面
03-10
在构建“css+div实现小米商城主界面”的项目中，我们深入探讨了HTML和CSS这两种核心技术，它们共同构成了网页的结构和样式。以下是对描述中提及的知识点的详细解释： 1. **伪类`:hover`**：`:hover`是CSS中的一个伪...
前端项目——小米官网首页
11-15
使用div+css实现小米官网首页内容，其中使用css3动画做了轮播图，以及鼠标悬停的动画效果，未涉及到js等逻辑内容，适合前端初期学习的小伙伴们参考借鉴
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单）
热门推荐
王佳斌
10-12 2万+
CSS - 鼠标移入悬停显示下拉菜单（导航栏鼠标经过 hover 时出现二级菜单），HTML css3菜单鼠标移入显示下方二级菜单，用纯CSS实现鼠标经过后出现下拉菜单，css实现网页中鼠标移入出现下拉框，用纯CSS实现鼠标经过后出现下拉菜单，鼠标移动下拉菜单(下拉菜单之纯CSS实现方法) 鼠标悬停显示下拉菜单，html鼠标悬停下拉列表，CSS实现鼠标悬停出现下拉菜单及二级菜单。CSS 下拉菜单 | 菜鸟教程，官方教程。hover菜单时显示隐藏的div盒子，里面有二级菜单。
H5C3练习心得 12.17（小米商城下拉二级菜单）--hover,display
yaoya_yaoya的博客
12-17 541
然后当鼠标悬停在li上的时候,div设置成display:block;大家有什么不懂可以在评论区问我，或者我的代码有什么值得改进的地方，欢迎大家给我更好的建议。鼠标悬停在A元素时，改变A的指定兄弟元素B的样式（AB可以不相邻，但B必须在A之后）然后，当鼠标悬停在下拉菜单所在的元素上时，我们使用。鼠标悬停在A元素时，改变与A相邻的兄弟元素B元素的样式（B必须与A相邻）以下是我做小米商城下拉二级菜单的代码，大家有需要的可以运行运行，琢磨琢磨。鼠标悬停在A元素时,改变A元素的子元素B元素的样式。
鼠标悬停显示二级菜单HTML+CSS
不知名
11-27 2775
鼠标悬停显示二级菜单HTML+CSS
vue——element鼠标悬停显示菜单、弹出窗、点击弹出菜单
wy313622821的博客
05-21 1万+
element鼠标悬停显示菜单、弹出窗、点击弹出菜单
js css鼠标悬停显示下拉菜单
masuwen博客
03-28 1万+
&lt;div class="swss_xx"&gt; &lt;ul class="clearfix"&gt; &lt;li id="xxwh"&gt;&lt;a href="#" onclick="javascript:studentInfoUpdate()"&gt;个人信息维护&
css实现鼠标滑过展现菜单
小瑞峰
06-27 3745
这是在界面中浮出的菜单，当鼠标移上去时会出现二级菜单 （该需求在查找时发现资料比较凌乱，所以按照查找到的资料，配合图进行直观的展示） 效果图： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...
html、css制作小米商城左侧导航栏
05-20
下面是一个简单的 HTML 和 CSS 代码来实现小米商城左侧导航栏： HTML 代码： ``` <div class="sidebar"> <ul> <li><a href="#">手机</a></li> <li><a href="#">电视</a></li> <li><a href="#">笔记本</a></li> <li><a href="#">家电</a></li> <li><a href="#">智能</a></li> </ul> </div> ``` CSS 代码： ``` .sidebar { width: 200px; background-color: #f5f5f5; padding: 20px; } .sidebar ul { list-style: none; margin: 0; padding: 0; } .sidebar li { margin-bottom: 10px; } .sidebar li a { display: block; padding: 10px; color: #333; text-decoration: none; } .sidebar li a:hover { background-color: #ddd; color: #333; } ``` 这段代码将会创建一个宽度为 200px 的侧边栏，该侧边栏包含一个无序列表，其中每个列表项都是一个链接。当鼠标悬停在链接上时，链接的背景颜色将会变成灰色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值