鼠标悬停时更改图像不透明度

使用opacity属性和:hover选择器来更改鼠标悬停时的不透明度。以下是更改鼠标悬停时图像不透明度的代码。

更改图像不透明度

以下是我们需要更改鼠标悬停时不透明度的图像。我们使用了<img>元素来设置图像 -

<img class="transparent" src="https://tutorialspoint.com/java/images/java-mini-logo.jpg" >

图像类最初设置为opacity属性值为1，即实际图像 -

.transparent{
   width:270px;
   height:200px;
   opacity: 1;
   transition: 0.3s;
}

使用:hover选择器设置图像悬停时的不透明度 -

.transparent:hover{
   opacity: 0.3;
}

示例

让我们来看一个更改鼠标悬停时图像不透明度的示例 -

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }
      .transparent{
         width:270px;
         height:200px;
         opacity: 1;
         transition: 0.3s;
      }
      .transparent:hover{
         opacity: 0.3;
      }
   </style>
</head>
<body>
   <h1>Image opacity on hover example</h1>
   <img class="transparent" src="https://tutorialspoint.com/java/images/java-mini-logo.jpg" >
   <p>Hover over the above image to change its opacity</p>
</body>
</html>

将图像不透明度更改为完全透明

要将图像不透明度更改为完全透明，请将元素的不透明度级别设置为0，即 -

opacity: 0;

示例

让我们来看这个例子 -

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }
      .transparent{
         width:270px;
         height:200px;
         opacity: 1;
         transition: 0.3s;
      }
      .transparent:hover{
         opacity: 0;
      }
   </style>
</head>
<body>
   <h1>Image opacity on hover example</h1>
   <img class="transparent" src="https://tutorialspoint.com/java/images/java-mini-logo.jpg" >
   <p>Hover over the above image to change its opacity</p>
</body>
</html>

将图像不透明度更改为完全不透明

要将图像不透明度更改为完全不透明，请将元素的不透明度级别设置为1，即 -

opacity: 1;

示例

让我们来看这个例子。在这里，使用不透明度属性，图像将在鼠标悬停时可见 -

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }
      .transparent{
         width:270px;
         height:200px;
         opacity: 0;
         transition: 0.3s;
      }
      .transparent:hover{
         opacity: 1;
      }
   </style>
</head>
<body>
   <h1>Image opacity on hover example</h1>
   <img class="transparent" src="https://tutorialspoint.com/java/images/java-mini-logo.jpg" >
   <p>Hover over the above image to display it/p>
</body>
</html>

更新于: 2023-10-30

2K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告