简单的鼠标悬停效果

最新推荐文章于 2022-04-06 16:13:35 发布

一岁-枯荣

最新推荐文章于 2022-04-06 16:13:35 发布

阅读量1.2w

点赞数 1

分类专栏： HTML 文章标签： HTMLJava学习IT学习鼠标

本文链接：https://blog.youkuaiyun.com/qq_40401942/article/details/78114057

版权

HTML 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何利用HTML和CSS来设计鼠标悬停效果。通过`<a>`标签实现链接，并结合`<style>`标签定义类和ID样式。通过`.btn`和`#bn`选择器设置样式，同时讲解了如何利用:hover伪类创建悬停效果。此外，还提到了使用display: block将行内元素转换为块级元素，以调整布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<base target="_blank" />

	<style>
	a{
	color: black;
	text-decoration: none;
	/border:solid 1px #000000;/
	/行内元素转块级元素/
	display: block;
	width: 100px;
	height: 40px;
	/文本对齐/
	text-align: center;
	line-height: 40px;
	/改为左浮动/
	float: left;
	/设置外边距/
	margin: 10px;
	}

	/设置鼠标悬停/
	a:hover{
	color: #ffffff;
	background-color: #FF0000;
	}

	</style>
	</head>
	<body>

	<a href="#" class="">首页</a>
	<a href="#" class="">公司简介</a>
	<a href="#" class="">产品中心</a>
	<a href="#" class="">人才招聘</a>
	<a href="#" class="def">联系我们</a>
	</body>
	</html>

运用简单的标签和标签样式设计自己喜欢的鼠标悬停样式：

<a href="网址"></a> //可以点击文本使之跳转到相应的网址。

在<style></style>中设置其样式时用 .btn{...}表示；还可以使用id名，例如：id="bn" 用 #bn{...}表示。其

中class名可以有多个，而id名只能有一个。

设置鼠标悬停样式：标签名：hover{...}。

行内元素转化为块级元素（方便改变其排版样式）：display：block；

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<base target="right" />
	<style>
	body{
	margin: 0px;
	padding: 0;
	background-color: #1C2B36;
	}
	a{
	color: #869FB1;
	text-decoration: none;
	display: block;
	width: 150px;
	height: 50px;
	line-height: 50px;
	text-align: center;

	}

	a:hover{
	background-color: #131E26;
	color: #ffffff;
	}
	</style>
	</head>
	<body>

	<a href="c.html">首页</a>
	<a href="gsjj.html">公司简介</a>
	<a href="cpzx.html">产品中心</a>
	<a href="lxwm.html">联系我们</a>

	</body>
	</html>

这是一个初级者的知识记录。