資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究滑鼠懸停時更改影像不透明度
使用opacity屬性和:hover選擇器來更改滑鼠懸停時的不透明度。以下是更改滑鼠懸停時影像不透明度的程式碼。
更改影像不透明度
以下是我們需要更改滑鼠懸停時不透明度的影像。我們使用了<img>元素來設定影像 -
<img class="transparent" src="https://tutorialspoint.tw/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.tw/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.tw/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.tw/java/images/java-mini-logo.jpg" >
<p>Hover over the above image to display it/p>
</body>
</html>
更新於: 2023-10-30
2K+ 瀏覽量
廣告