Css 简明教程

CSS - :hover

CSS 中的 :hover 伪类用于在用户使用鼠标光标悬停在元素上时定位该元素。其目的是应用样式或触发特定行为，以增强用户体验或提供额外的视觉反馈。

The :hover pseudo-class in CSS is used to target an element when the user hovers over it with the mouse cursor. Its purpose is to apply styles or trigger specific behaviors to enhance the user experience or provide additional visual feedback.

:hover 是一种无需用户进行任何输入即可让交互元素更具动态性和吸引力的工具，只需移动鼠标即可。

:hover is a tool to make interactive elements more dynamic and engaging without requiring any user input beyond moving the mouse.

Applies to

HTML 元素，如按钮、链接、图像等。

HTML elements, such as buttons, links, images, etc.

DOM Syntax

:hover {
   /* ... */
}

CSS :hover - With Background-color Property

这里有一个更改链接背景颜色的示例：

Here is an example of changing the background color of a link:

<html>
<head>
<style>
   div {
      padding: 1rem;
   }
   a {
      background-color: rgb(238, 135, 9);
      font-size: 1rem;
      padding: 5px;
   }
   a:hover {
      background-color: rgb(235, 235, 169);
   }
</style>
</head>
<body>
   <div>
      <h3>Hover example - link</h3>
      <a href="#">Hover over to see the color change!!!</a>
   </div>
</body>
</html>

CSS :hover - With Button Effect

这里有一个更改按钮背景颜色的示例：

Here is an example of changing the background color of a button:

<html>
<head>
<style>
   div {
      padding: 1rem;
   }
   button {
      background-color: greenyellow;
      font-size: large;
   }
   button:hover {
      background-color: gold;
   }
</style>
</head>
<body>
      <h3>Hover example - button</h3>
      <button>Hover me!!!</button>
   </div>
</body>
</html>

CSS :hover - With Border Effect

这里有一个示例，其中的链接边框在悬停时发生更改：

Here is an example, where border of the link is changing on hover:

<html>
<head>
<style>
   .link {
      color: blue;
      text-transform: uppercase;
      padding: 20px;
      border: 4px solid blue;
      border-radius: 10px;
      display: inline-block;
   }
   .link:hover {
      color: #494949;
      border-radius: 45px;
      border-color: #494949;
   }
</style>
</head>
<body>
   <h3>Hover effect on border of the link</h3>
   <div class="button"><a class="link" href="#">Check my borders on hover</a></div>
</body>
</html>

CSS :hover - With box-shadow

这里有一个示例，其中在悬停时向链接添加 box-shadow：

Here is an example, where box-shadow is added to the link on hover:

<html>
<head>
<style>
   a {
      font-size: 2rem;
      color: #071402;
      margin: 0 .25rem;
      padding: 0 .25rem;
      transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
   }
   a:hover {
      box-shadow: inset 100px 0 0 100px #9ce2cc;
      color: rgb(240, 32, 32);
   }
</style>
</head>
<body>
   <div>
      <a href="#">Hover over me!!</a>
   </div>
</body>
</html>

CSS :hover - With Background Effect

这里有一个示例，其中背景在悬停时在链接上增长：

Here is an example, where the background grows over a link on hover:

<html>
<head>
<style>
   a {
      text-decoration-line: underline;
      color: #18272F;
      font-size: 2rem;
      position: relative;
   }
   a::before {
      content: '';
      background-color: rgba(118, 213, 83, 0.75);
      font-size: 2rem;
      position: absolute;
      left: 0;
      bottom: 3px;
      width: 100%;
      height: 10px;
      z-index: -1;
      transition: all .5s ease-in-out;
   }
   a:hover::before {
      bottom: 0;
      height: 100%;
   }
</style>
</head>
<body>
   <div>
      <a href="#">Hover over me!!</a>
   </div>
</body>
</html>

CSS :hover - Rainbow Color Effect

这里有一个示例，其中链接的底线在悬停时提供彩虹色效果：

Here is an example, where the underline of the link gives a rainbow color effect on hover:

<html>
<head>
<style>
   a {
      color: black;
      text-decoration: none;
      }
   a {
      background:
      linear-gradient(
      to right,
      rgb(179, 232, 168),
      rgb(185, 162, 215)
      ),
      linear-gradient(
      to right,
      rgba(255, 0, 0, 1),
      rgba(255, 0, 180, 1),
      rgba(0, 200, 50, 1)
      );
      background-size: 100% 5px, 0 5px;
      background-position: 100% 100%, 0 100%;
      background-repeat: no-repeat;
      transition: background-size 700ms;
   }
   a:hover {
      background-size: 0 5px, 100% 5px;
   }
   body {
      display: grid;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 2rem;
      height: 100vh;
   }
</style>
</head>
<body>
   <div>
      <a href="#">Hover over me!!</a>
   </div>
</body>
</html>

CSS :hover - Shadow Effect

这里有一个示例，其中在悬停时向按钮提供一个阴影效果：

Here is an example, where the a shadow effect is given to a button on hover:

<html>
<head>
<style>
   body {
      width: 100%;
      height: 100vh;
      display: grid;
      justify-content: center;
      align-items: center;
   }
   .glow {
      padding: 10px;
      width: 250px;
      height: 50px;
      border: none;
      outline: none;
      color: #fff;
      background: #111;
      cursor: pointer;
      position: relative;
      z-index: 0;
      border-radius: 20px;
   }
   .glow:before {
      content: '';
      background: linear-gradient(60deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
      position: absolute;
      top: -4px;
      left:-4px;
      background-size: 400%;
      z-index: -1;
      filter: blur(15px);
      width: calc(100% + 6px);
      height: calc(100% + 6px);
      animation: glowing 20s linear infinite;
      opacity: 0;
      transition: opacity .3s ease-in-out;
      border-radius: 10px;
   }
   .glow:active {
      color: rgb(246, 235, 235)
   }
   .glow:active:after {
      background: transparent;
   }
   .glow:hover:before {
      opacity: 1;
   }
   .glow:after {
      z-index: -1;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: #111;
      left: 0;
      top: 0;
      border-radius: 10px;
   }
   @keyframes glowing {
      0% { background-position: 0 0; }
      50% { background-position: 400% 0; }
      100% { background-position: 0 0; }
   }
</style>
</head>
<body>
   <button class="glow" type="button">HOVER OVER & CLICK!</button>
</body>
</html>