我們在本文中要執行的任務是如何在將鼠標懸停在圖像上時顯示字體。讓我們深入研究本文并快速了解 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' width='100%' height='100%'>
<div>TP HTML LOGO</div>
</div>
<div class="img">
<img src='https://www.tutorialspoint.com/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://www.tutorialspoint.com/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://www.tutorialspoint.com/static/images/logo-color.png">
<p>Welcome to Tutorialspoint</p>
</div>
</body>
</html>
登錄后復制
當腳本執行時，會彈出輸出窗口，使圖像在網頁上顯示為圓形。當用戶將鼠標懸停在圖像上時，它將顯示文本。
以上就是如何在鼠標懸停在圖像上時顯示字體？的詳細內容，更多請關注www.92cms.cn其它相關文章！
