极客教程CSS Hover时设置某一对象的背景
在网页设计中，CSS的hover伪类是一个非常有用的特性，它允许我们在用户将鼠标悬停在某个元素上时改变该元素的样式。在本文中，我们将重点介绍如何使用CSS hover时设置某一对象的背景。
1. 基本概念
在CSS中，我们可以使用:hover伪类来为元素定义悬停时的样式。通过为元素设置:hover伪类，我们可以在用户将鼠标悬停在该元素上时改变其样式。在这里，我们将重点介绍如何使用:hover伪类来设置某一对象的背景。
2. 示例代码
2.1 改变背景颜色
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
transition: background-color 0.5s;
}
.hover-div:hover {
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，背景颜色会从灰色变为红色。
2.2 改变背景图片
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-size: cover;
transition: background-image 0.5s;
}
.hover-div:hover {
background-image: url('https://static.deepinout.com/gk-static/logo.png');
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，背景图片会从一张图片变为另一张图片。
2.3 改变背景透明度
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, 0.5);
transition: background-color 0.5s;
}
.hover-div:hover {
background-color: rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，背景透明度会从50%变为80%。
2.4 改变背景位置
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-size: cover;
background-position: center;
transition: background-position 0.5s;
}
.hover-div:hover {
background-position: top;
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，背景图片的位置会从居中变为顶部对齐。
2.5 改变背景大小
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-size: cover;
transition: background-size 0.5s;
}
.hover-div:hover {
background-size: contain;
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，背景图片的大小会从覆盖整个元素变为适应元素大小。
2.6 改变背景边框
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #000;
transition: border-color 0.5s;
}
.hover-div:hover {
border-color: #ff0000;
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，边框颜色会从黑色变为红色。
2.7 改变背景阴影
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
transition: box-shadow 0.5s;
}
.hover-div:hover {
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，阴影效果会变得更加明显。
2.8 改变背景旋转
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
transform: rotate(0deg);
transition: transform 0.5s;
}
.hover-div:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，元素会顺时针旋转45度。
2.9 改变背景缩放
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
transform: scale(1);
transition: transform 0.5s;
}
.hover-div:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，元素会放大20%。
2.10 改变背景模糊
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-image: url('https://static.deepinout.com/gk-static/logo.png');
background-size: cover;
filter: blur(0px);
transition: filter 0.5s;
}
.hover-div:hover {
filter: blur(5px);
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，背景图片会变得模糊。
2.11 改变背景渐变
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background: linear-gradient(to right, #ff0000, #00ff00);
transition: background 0.5s;
}
.hover-div:hover {
background: linear-gradient(to right, #00ff00, #0000ff);
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，背景颜色会从红绿渐变变为绿蓝渐变。
2.12 改变背景形状
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
border-radius: 50%;
transition: border-radius 0.5s;
}
.hover-div:hover {
border-radius: 0%;
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，元素的形状会从圆形变为正方形。
2.13 改变背景边框圆角
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
border-radius: 10px;
transition: border-radius 0.5s;
}
.hover-div:hover {
border-radius: 50%;
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，边框的圆角会变得更加圆润。
2.14 改变背景边框宽度
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #000;
transition: border-width 0.5s;
}
.hover-div:hover {
border-width: 5px;
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，边框的宽度会从1px变为5px。
2.15 改变背景边框样式
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #000;
transition: border-style 0.5s;
}
.hover-div:hover {
border-style: dashed;
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，边框的样式会从实线变为虚线。
2.16 改变背景边框颜色
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #000;
transition: border-color 0.5s;
}
.hover-div:hover {
border-color: #ff0000;
}
</style>
</head>
<body>
<div class="hover-div"></div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，边框的颜色会从黑色变为红色。
2.17 改变背景文字颜色
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
color: #000;
transition: color 0.5s;
}
.hover-div:hover {
color: #ff0000;
}
</style>
</head>
<body>
<div class="hover-div">Hover over me</div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，文字颜色会从黑色变为红色。
2.18 改变背景文字大小
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
font-size: 16px;
transition: font-size 0.5s;
}
.hover-div:hover {
font-size: 20px;
}
</style>
</head>
<body>
<div class="hover-div">Hover over me</div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，文字大小会从16px变为20px。
2.19 改变背景文字样式
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
font-weight: normal;
transition: font-weight 0.5s;
}
.hover-div:hover {
font-weight: bold;
}
</style>
</head>
<body>
<div class="hover-div">Hover over me</div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，文字样式会从普通变为加粗。
2.20 改变背景文字装饰
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
text-decoration: none;
transition: text-decoration 0.5s;
}
.hover-div:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="hover-div">Hover over me</div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，文字装饰会从无变为下划线。
2.21 改变背景文字间距
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
letter-spacing: 0px;
transition: letter-spacing 0.5s;
}
.hover-div:hover {
letter-spacing: 2px;
}
</style>
</head>
<body>
<div class="hover-div">Hover over me</div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，文字间距会从0px变为2px。
2.22 改变背景文字阴影
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
text-shadow: none;
transition: text-shadow 0.5s;
}
.hover-div:hover {
text-shadow: 2px 2px 2px #000;
}
</style>
</head>
<body>
<div class="hover-div">Hover over me</div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，文字会产生阴影效果。
2.23 改变背景文字旋转
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
transform: rotate(0deg);
transition: transform 0.5s;
}
.hover-div:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="hover-div">Hover over me</div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，文字会旋转45度。
2.24 改变背景文字透明度
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
opacity: 1;
transition: opacity 0.5s;
}
.hover-div:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="hover-div">Hover over me</div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，文字的透明度会从1变为0.5。
2.25 改变背景文字背景
<!DOCTYPE html>
<html>
<head>
<style>
.hover-div {
width: 200px;
height: 200px;
background-color: #f0f0f0;
padding: 10px;
transition: background-color 0.5s;
}
.hover-div:hover {
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="hover-div">Hover over me</div>
</body>
</html>
Output:
在这个示例中，当鼠标悬停在.hover-div元素上时，文字的背景颜色会从灰色变为红色。