鼠标悬停制作导航栏

射手座的程序媛

已于 2023-12-12 09:05:45 修改

阅读量892

点赞数 11

分类专栏：前端文章标签： html 前端 css3

于 2023-12-12 08:39:53 首次发布

本文链接：https://blog.csdn.net/ly121862/article/details/134939940

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果图

效果为鼠标悬停时, 文字增加背景色同时更改文字颜色

html页面

在hbuilder中任意创建一个文件，例如 demo.html

本效果需要使用到 css 中的 float 及伪类样式

在 CSS 中，float 属性用于指定元素相对于父元素的左右浮动方向。当元素设为 float 后，元素将会脱离文档标准流（normal flow），并根据指定的浮动方向，尽可能地靠左或靠右排列。

常见的 float 属性取值有 left、right 和 none。left 表示元素浮动到左侧，right 表示元素浮动到右侧， none 表示取消浮动或恢复浮动之前的默认设置。

在进行 float 设计时，需要特别注意以下几点：

1.浮动元素会对后面几个元素的布局产生影响，因此需要注意设置好清除浮动。

2.不建议将浮动元素用于布局，因为浮动元素不能撑开父容器，会产生一些布局问题，建议使用 flexbox、grid 等布局方式。

3.在设置浮动属性时，需要结合其他属性一起使用，如清除浮动等。

代码如下:

<body>
	
		<div>
			<ul>
				<li>新闻</li>
				<li>新闻1</li>
				<li>新闻2</li>
				<li>新闻3</li>
				<li>新闻4</li>
				<li>新闻5</li>
				<li>新闻6</li>
			</ul>
			
		</div>
		
	</body>

此页面直接运行效果如下:

但此页面距离效果图还有一定的差距, 因此需要使用css 来进行美化

css代码

在当前demo.html 中增加 <style></style>标签

<style>
		
		 ul{
			 overflow: hidden;
		 }
		 li{
			 float: left;
			 list-style: none;
			 line-height: 35px; /* 设置行高 ,*/
			 width: 60px; /* 增加宽度*/
			 text-align: center;/* 文本水平居中对齐 */
		 }
		
		li:hover{
			color: #00FF00;
			background-color: #696969;
		}
		
		</style>

再次运行

这里需要强调下:

当li进行浮动时, 他的父容器即ul 必须设置 overflow:hidden, 撑开盒子的高度

在 CSS 中，overflow:hidden 属性用于控制元素的溢出部分如何处理，将其设为 hidden 时，超出元素所在框的部分将被隐藏，从而保证不会影响页面布局。

常见的应用场景有以下几个：

1.清除浮动：将父元素使用 overflow:hidden 属性包裹住所有浮动的子元素，可以清除浮动所导致的高度塌陷问题。

2.隐藏溢出文本：当一个元素设定了固定的宽度，但文本内容过多时导致溢出，此时设置 overflow:hidden 属性，可以实现隐藏溢出文本的效果。

3.图片裁剪：当图片显示过大时，也可以使用 overflow:hidden 属性来实现图片的裁剪效果。

需要注意的是，使用 overflow:hidden 属性可能会隐藏超出元素所在框的部分内容，因此需要根据实际需求合理使用该属性，并避免出现元素内容被截断的情况。