数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究鼠标悬停时更改图像不透明度
使用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+ 浏览量
广告