CSS Hover时设置某一对象的背景|极客教程

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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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:

CSS Hover时设置某一对象的背景

在这个示例中，当鼠标悬停在.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>