資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使滑鼠懸停在影像上時顯示字型？
本文將介紹如何實現滑鼠懸停在影像上時顯示字型。讓我們深入瞭解文章，並快速瞭解 HTML 中的懸停和滑鼠懸停。
HTML 中的onmouseover事件在滑鼠指標觸及元素時觸發。當滑鼠指標離開元素時，會發生名為onmouseout的事件。
當用戶使用指向裝置與元素互動時，:hover CSS 偽類匹配，但並不總是被啟用。通常，當用戶將游標懸停在元素上（滑鼠指標）時，它會被啟用。
語法
以下是hover的語法：
:hover
為了更好地理解如何在滑鼠懸停在影像上時顯示字型，讓我們來看以下示例。
示例
在下面的示例中，我們使滑鼠懸停在影像上時字型可見。
<!DOCTYPE html>
<html>
<body>
<style>
.img {
position: relative;
width: 200px;
height: 200px;
float: left;
margin-right: 10px;
}
.img div{
position: absolute;
bottom: 0;
right: 0;
background: black;
color: white;
margin-bottom: 5px;
visibility: hidden;
}
.img:hover{
cursor: pointer;
}
.img:hover div{
width: 150px;
padding: 8px 15px;
visibility: visible;
opacity: 0.7;
}
</style>
<div class="img">
<img src='https://tutorialspoint.tw/html/images/html-mini-logo.jpg' width='100%' height='100%'>
<div>TP HTML LOGO</div>
</div>
<div class="img">
<img src='https://tutorialspoint.tw/java/images/java-mini-logo.jpg' width='100%' height='100%'>
<div>TP JAVA LOGO</div>
</div>
</body>
</html>
當指令碼執行時，它將生成一個輸出，在網頁上顯示一個影像。如果使用者將滑鼠懸停在影像上，它將在頁面上顯示該特定影像的文字描述。
示例
在下面的示例中，我們使滑鼠懸停在影像上時字型出現，並且它覆蓋整個影像。
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
position: relative;
max-width: 500px;
}
.tutorial img { width: 100%; }
.fulltext {
box-sizing: border-box;
width: 100%;
height: 100%;
position: absolute;
top: 0; left: 0;
text-align: center;
padding-top: 30%;
background-color: #EAFAF1 ;
color: black;
}
.fulltext {
visibility: none; opacity: 0;
transition: opacity 0.3s;
}
.tutorial:hover .fulltext {
visibility: visible; opacity: 1;
}
</style>
<div class="tutorial">
<img src=https://tutorialspoint.tw/java/images/java-mini-logo.jpg>
<div class="fulltext">
LEARN JAVA...!<br>
</div>
</div>
</body>
</html>
執行上述指令碼後，輸出視窗將彈出，在網頁上顯示一個影像。如果使用者將滑鼠移到影像上，它將顯示覆蓋整個影像的文字。
示例
執行以下程式碼，觀察滑鼠懸停在影像上時字型是如何顯示的。
<!DOCTYPE html>
<html>
<body>
<style>
div {
position: relative;
top: 0px;
left: 0px;
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
text-align: center
}
img {
width: 400px;
height: 400px;
position: absolute;
border-radius: 50%
}
img:hover {
opacity: 0;
transition:opacity 2s;
}
heading {
line-height: 40px;
font-weight: bold;
text-align: center;
position: absolute;
display: block
}
div p {
width: 420px;
line-height: 20px;
display: inline-block;
padding: 200px 0px;
vertical-align: middle;
height: 450px
}
</style>
<div>
<img src="https://tutorialspoint.tw/static/images/logo-color.png">
<p>Welcome to Tutorialspoint</p>
</div>
</body>
</html>
當指令碼執行時，輸出視窗將彈出，使影像在網頁上以圓形顯示。當用戶將滑鼠懸停在影像上時，它將顯示文字。
更新於： 2023年4月20日
781 次瀏覽
廣告