CSS hover

时间:2023-03-09 16:58:45
CSS hover

CSS hover

hover 鼠标移动到当前标签上时,以下css属性才能生效

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 创建类 */
.pg-header {
/* 固定页面位置 */
position: fixed;
/* 设置右 */
right: 0;
/* 设置左 */
left: 0;
/* 设置上 */
top: 0;
/* 设置高度 */
height: 48px;
/* 设置背景颜色 */
background-color: #2459a2;
} /* 指定字符间位置 */
.w {
width: 980px;
margin: 0 auto;
} /* 设置样式字符距离 */
.pg-header .menu {
/* 设置为块级与行内标签 */
display: inline-block;
/* 设置字符间距离 */
padding: 0 10px 0 10px;
/* 设置字符颜色 */
color: white;
} /* 鼠标放置后触发 */
.pg-header .menu:hover {
/* 修改背景颜 */
background-color: blue;
}
</style>
</head>
<body>
<!-- 调用类 -->
<div class="pg-header">
<!-- 调用类,设置边距 -->
<div class="w" style="margin-top:16px">
<!-- 调用类 -->
<a class="logo">LOGO1</a>
<a class="menu">xxx</a>
<a class="menu">xxx</a>
</div>
</div>
</body>
</html>