前端鼠标悬停（html)

最新推荐文章于 2024-07-26 15:05:55 发布

寄与星河

最新推荐文章于 2024-07-26 15:05:55 发布

阅读量350

点赞数 5

文章标签：前端 html

本文链接：https://blog.csdn.net/2301_80152154/article/details/139605454

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>鼠标悬停</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;   /* 去除下划线 */
			}
			.mymusic{
				font-size: 36px;
				color: black;
			}
			/* 鼠标悬停 */
			.mymusic:hover{
				color: aqua;
			}
			.box{
				width: 200px;
				height: 200px;
				background-color: pink;
				/* 圆角 */
				border-radius: 100px;
			}
			.box2{
				width: 0;
				height: 0;
				border-top: 50px solid transparent;  /*  transparent 透明 */
				border-left: #00ffff 50px solid;
				border-right: transparent 50px solid;
				border-bottom: transparent 50px solid;
			}
			.inbox{
				width: 200px;
				height: 50px;
				border: 1px solid red;
			}
			.inbox input{
				width: 170px;
				height: 100%;
				border: none;
				/* line-height: 100px; 文字居中 */
			}
		</style>
	</head>
	<body>
		<a href="#" class="mymusic">我的音乐</a>
		<div class="box"></div>
		<div class="box2"></div>
		<div class="inbox">
			<input type="text" placeholder="搜索" />
			<img src="img/ss.png">
		</div>
	</body>
</html>