CSS悬停

hover 选择器用于当我们在元素上移动鼠标时选择它们。它不仅限于链接。我们几乎可以在每个HTML元素上使用它。要设置链接到未访问页面的样式，可以使用：link选择器。要为访问页面的链接设置样式，可以使用：visited选择器，为活动链接设置样式可以使用：active选择器。

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

悬停功能包括以下效果：

• 更改背景和字体的颜色。
• 修改图像的不透明度。
• 文字嵌入。
• 创建图像翻转效果。
• 交换图像。

注意：要使悬停有效，我们必须在CSS定义中的：link和：visited选择器之后声明它们。

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

通常，悬停功能与所有主要浏览器兼容。但是，在触摸设备上实现它将是一项艰巨的任务。可以观察到，活动悬停函数卡在了不支持的设备上。

句法

:hover {
  css declarations;
}

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

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

让我们看看将光标放在链接上时链接的颜色如何改变。它将产生时尚的效果，并且在我们使用CSS时易于实现。

   
 
 
    
Move your mouse on the below link to see the hover effect.
    CSS Grid
 

示例2：将鼠标悬停在段落，标题和链接上

Hello World
Welcome to the javaTpoint.
CSS Grid

示例3-图像悬停在文本上

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

Image Overlay Title Effect
Move your mouse over the image to see the effect.



      
      
Welcome to javaTpoint.com