如何在滑鼠懸停在圖像上時顯示字體？
- WBOY轉載
- 2023-09-13 08:09:022930瀏覽
我們在本文中要執行的任務是如何在將滑鼠懸停在圖像上時顯示字體。讓我們深入研究本文並快速了解 HTML 中的懸停和滑鼠懸停。
HTML 中的 onmouseover 事件在滑鼠指標觸碰某個元素時觸發。當滑鼠指標離開某個元素時，會發生一個名為 onmouseout 的事件。
當使用者使用指點裝置與元素互動時，:hover CSS 偽類會匹配，但它並不總是被啟動。通常，當使用者將遊標懸停在元素（滑鼠指標）上時，它會被啟動。
文法
以下是懸停的語法 -
: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://www.tutorialspoint.com/html/images/html-mini-logo.jpg' style="max-width:90%" style="max-width:90%" alt="如何在滑鼠懸停在圖像上時顯示字體？" >
<div>TP HTML LOGO</div>
</div>
<div class="img">
<img src='https://www.tutorialspoint.com/java/images/java-mini-logo.jpg' style="max-width:90%" style="max-width:90%" alt="如何在滑鼠懸停在圖像上時顯示字體？" >
<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://www.tutorialspoint.com/java/images/java-mini-logo.jpg alt="如何在滑鼠懸停在圖像上時顯示字體？" >
<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://www.tutorialspoint.com/static/images/logo-color.png" alt="如何在滑鼠懸停在圖像上時顯示字體？" >
<p>Welcome to Tutorialspoint</p>
</div>
</body>
</html>
當腳本執行時，會彈出輸出窗口，使圖像在網頁上顯示為圓形。當使用者將滑鼠懸停在圖像上時，它將顯示文字。
以上是如何在滑鼠懸停在圖像上時顯示字體？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除