CSS中的Hover介绍及实例

迪鲁宾
768 阅读4分钟

Hover in CSS

CSS中的悬停介绍

动态网页是时代的要求。一个网页越是对用户友好，越是具体，它就越有可能被最终用户使用或浏览。当涉及到为网页提供动态属性时，层叠样式表有很多功能可以提供。悬停功能就是其中之一。在任何元素的造型中使用这一属性，我们可以确保当我们将鼠标悬停在页面的那一部分时，我们会得到所需的效果。它的使用很简单，但却给页面带来了装饰性的动画效果，这总是可以被视为一个优点。让我们来探讨一下这个属性和它的用途。在本专题中，我们将学习CSS中的Hover。

CSS中悬停的语法和用途

为了在CSS中创建任何悬停效果，我们要为该元素创建一个伪类，描述在该元素上悬停时必须有的效果。悬停属性的语法是。

p:hover{
background-color: green;
}

这个伪类可以有类似于普通类的属性。这些属性将在该元素被悬停后生效。这样，我们就可以根据页面的整体设计或要求，创建各种类型的悬停效果。

CSS中的悬停示例

让我们来看看CSS中悬停功能的一些例子。

例子#1

使用外部CSS在一个HTML元素上演示悬停效果

  • 在这个例子中，我们将使用外部CSS，所以我们将按照流程先创建CSS页面。
  • 在CSS页面中，我们将首先定义段落元素的样式。接下来，我们将创建一个伪类，并为同一元素定义悬停效果。
  • 这个例子的CSS代码应该如下所示。
p{
font-size: 25px;
font-style: italic;
text-decoration: double;
background-color: lightpink;
color: green;
}
P:hover{
background-color: yellow;
font-style: normal;
color: black;
}
  • 接下来，我们将创建一个HTML页面。在这里，在页眉部分，我们将首先调用外部样式表。然后，在正文部分，我们将使用段落元素来演示悬停效果。
  • 该页面的HTML代码可以类似于下面的代码片段。
<html>
<head>
<title>Hover in CSS</title>
<link rel = "stylesheet" href = "hover.css">
</head>
<body>
<h2>Demo of Hover Feature in CSS</h2>
<p>The effect of this text will change when you hover over it!</p>
</body>
</html>
  • 现在，当人们打开这个页面时，它将看起来像这样。

hover in css output 1

  • 而一旦你将鼠标悬停在粉色区域，它就会像这样转变。

hover in css output 2

例子 #2

使用外部CSS在多个HTML元素上演示过度效果

  • 与前面的例子类似，我们将首先创建一个外部样式表。
  • 我们将为几个元素定义样式，以及定义每个元素的悬停行为的伪类。
  • CSS代码应该类似于下面的代码片段。
p{
font-size: 25px;
font-style: italic;
text-decoration: double;
background-color: lightpink;
color: green;
}
P:hover{
background-color: yellow;
font-style: normal;
color: black;
}
a{
color: red;
font-style: italic;
font-size: 30px;
font-weight: 14px;
border: lightpink dotted;
}
a:hover{
color: blue;
font-style: normal;
font-weight: unset;
}
h2{
color: purple;
background-color: lightgreen;
font-weight: 16px;
}
h2:hover{
color: palevioletred;
background-color: white;
}
  • 接下来，我们将为HTML页面编写代码，其中标题部分将调用正在使用的外部样式表。
  • 在正文部分，我们将使用我们在CSS页面上样式的所有三个元素。
  • HTML代码应该与下面分享的代码相似。
<html>
<head>
<title>Hover in CSS</title>
<link rel = "stylesheet" href = "hover.css">
</head>
<body>
<h2>Demo of Hover Feature in CSS</h2>
<p>The effect of this text will change when you hover over it!</p>
<a href="https://www.google.com/">Link to Google</a>
</body>
</html>
  • 输出结果应该类似于下面的截图。

hover in css output 3

  • 将鼠标悬停在每个元素上，将得到以下输出结果。

hover in css output 4

hover in css output 5

hover in css output 6

例子 #3

使用内部CSS演示悬停功能

  • 由于我们在这个例子中使用的是内部CSS，我们将直接在HTML页面的标题部分编写样式代码。
  • HTML页面的标题部分应该如下。
<head>
<title>Hover in CSS</title>
<style>
p{
font-size: 25px;
font-style: italic;
text-decoration: double;
background-color: lightpink;
color: green;
}
P:hover{
background-color: yellow;
font-style: normal;
color: black;
}
a{
color: red;
font-style: italic;
font-size: 30px;
font-weight: 14px;
border: lightpink dotted;
}
a:hover{
color: blue;
font-style: normal;
font-weight: unset;
}
h2{
color: purple;
background-color: lightgreen;
font-weight: 16px;
}
h2:hover{
color: palevioletred;
background-color: white;
}
</style>
</head>

首先，我们将为正文编码，这样就可以使用所有三个元素，这些元素的样式已经在页眉中定义。

  • 该HTML代码应该与下面的片段有些类似。
<html>
<head>
<title>Hover in CSS</title>
<style>
p{
font-size: 25px;
font-style: italic;
text-decoration: double;
background-color: lightpink;
color: green;
}
P:hover{
background-color: yellow;
font-style: normal;
color: black;
}
a{
color: red;
font-style: italic;
font-size: 30px;
font-weight: 14px;
border: lightpink dotted;
}
a:hover{
color: blue;
font-style: normal;
font-weight: unset;
}
h2{
color: purple;
background-color: lightgreen;
font-weight: 16px;
}
h2:hover{
color: palevioletred;
background-color: white;
}
</style>
</head>
<body>
<h2>Demo of Hover Feature in CSS</h2>
<p>The effect of this text will change when you hover over it!</p>
<a href="https://www.google.com/">Link to Google</a>
</body>
</html>
  • 保存这个页面并通过浏览器打开它，将得到以下输出。

output 7

  • 将鼠标悬停在每个人身上，将得到以下输出。

output 8

output 9

output 10

  • 上面的几个例子解释了如何在CSS中使用悬停属性。人们可以为悬停伪类试验不同的功能，并根据设计方案进行设计。
avatar
文章
阅读
粉丝