CSS 教程

CSS 属性

CSS 进阶

CSS 设计

CSS 问题

CSS 其它

CSS 多选题

CSS 面试问题

CSS Hover悬停

:hover选择器用于在我们将鼠标移动到元素上时选择元素。它不仅限于链接。我们几乎可以在每个HTML

元素上使用它。要设置未访问页面的链接样式，我们可以使用 :link选择器。要为访问过的页面设置链接样式，我们可以使用 : visited选择器，我们可以使用 : active选择器来设置活动链接的样式。


它是在 CSS1 中引入的。在有效的网页设计程序中，悬停可用于根据用户的偏好突出显示网页。

悬停功能包括以下效果：

  • 更改背景和字体的颜色。

  • 修改图像的不透明度。

  • 文本嵌入。

  • 创建图像翻转效果。

  • 图像的交换。

注意：为了使悬停有效，我们必须在 :link 和 :visited 选择器之后声明它，如果它们存在于 CSS 定义中。

基本上，悬停效果会修改元素的属性值，以启用对指定图像/文本或相应元素的动画更改。在网页中嵌入悬停元素使它们具有交互性和功能性。

通常，悬停功能与所有主要浏览器兼容。但是，在触摸设备上实现它是一项具有挑战性的任务。据观察，主动悬停功能卡在非支持设备上。

句法 (Syntax)

:hover {  
  css declarations;  
}

让我们通过一些插图来理解它。

示例 1：使用 CSS 更改悬停时的链接颜色

让我们看看当我们将光标放在链接上

时链接的颜色是如何改变的。它将创建一个时尚的效果，当我们使用CSS时，它的实现很容易。

例子 (Example)

<html>
<head>

   <style>
      body{
         text-align:center;
      }
      a
      {
          color: red;
      }
      a:hover 
      { 
         color: green; 
      }            
      a:active
      {
      color: cyan;
      }
   </style>
 </head>
 <body>
    <h1>将鼠标移到下面的链接上以查看悬停效果。</h1>
    <a class = "link" href = https://www.rocschool.com/tutorial/rocschool-show-434.html>;CSS Grid</a>
 </body>
</html>
自己试试 »

示例 2：在段落、标题和链接上应用悬停

例子 (Example)

<html>
<head>
<style>
   body{
      text-align:center;
   }
p:hover, h1:hover, a:hover{
background-color: yellow;
}
</style>
</head>
<body>
<h1>你好世界</h1>
<p>欢迎来到 RocSchool。</p>
<a href='https://www.rocschool.com/tutorial/rocschool-show-434.html';>CSS Grid</a>
</body>
</html>
自己试试 »

示例 3 - 图像悬停上的文本叠加

此 CSS 代码在鼠标悬停期间显示图像上的文本。让我们看看鼠标悬停时的图像叠加效果。

例子 (Example)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
   body{
      text-align:center;
   }
* {box-sizing: border-box;}

.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute; 
  bottom: 0; 
  background: rgba(0, 0, 0, 0.2); 
  width: 100%;
  opacity:0; 
  transition: .9s ease;
  font-size: 25px;
  padding: 20px;
}

.container:hover .overlay {
  opacity: 1.5;
}
</style>
</head>
<body>

<h1>图片叠加标题效果</h1>
<h2>将鼠标移到图像上以查看效果。</h2>

<center>
<div class="container">
      <img src="/public/static/images/try/img_london.jpg" class="image">
      <div class="overlay">Welcome to RocSchool.com</div>
</div> </center>


</body>
</html>
自己试试 »


上一主题 CSS Colors 颜色 下一主题 CSS Important重要
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具