資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何使用 CSS 在懸停時縮放元素？
要使用 CSS 在懸停時縮放元素，我們將採用兩種不同的方法。在這篇文章中，我們將瞭解這兩種方法，以解釋如何使用 CSS 在懸停時縮放元素。
每種方法都有兩個示例，其中我們有一個div元素和一個影像，我們的任務是使用CSS在懸停時縮放 div 和影像元素。
在懸停時縮放元素的方法
以下是使用 CSS 在懸停時縮放元素的方法列表，我們將在本文中逐步解釋並提供完整的示例程式碼。
使用 scale() 方法縮放
在這種使用 CSS 在懸停時縮放元素的方法中，我們使用了scale() 方法和 transform 屬性。
- 我們使用 div 元素建立了一個正方形，並使用 CSS 屬性，例如 height 和 width 設定尺寸，margin-left 和 margin-top 設定margin，以及background-color 設定正方形的顏色。
- 我們使用了 transition 屬性來指定過渡。
- 我們使用了".scale:hover"，它在懸停在類名為 scale 的 div 上時設定效果。
- 我們使用了"transform: scale(1.5);" 來在懸停時縮放 div 元素。
- 在示例 2 中，我們在影像上應用了 scale() 方法，以便在懸停時縮放影像。
示例 1
這是一個完整的示例程式碼，實現了上述步驟，使用 CSS scale() 方法在懸停時縮放元素。
<html lang="en">
<head>
<title>
Zoom Using Scale() Method
</title>
<style>
.scale {
margin-left: 100px;
margin-top: 50px;
height: 150px;
width: 150px;
background-color: #04af2f;
transition: transform 0.2s;
}
.scale:hover{
transform: scale(1.5);
}
</style>
</head>
<body>
<h2>
Zoom/Scale an Element on Hover with CSS
</h2>
<p>
In this example we have used <strong>scale()
</strong> method to zoom/scale a div element
on Hover with CSS.
</p>
<div class="scale"></div>
</body>
</html>
示例 2
在這個例子中，我們使用了img標籤插入一個影像，然後應用 scale() 方法在懸停時縮放影像。
<html lang="en">
<head>
<title>
Zoom Using Scale() Method
</title>
<style>
.scale {
margin-left: 100px;
margin-top: 50px;
transition: transform 0.2s;
}
.scale:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<h2>
Zoom/Scale an Element on Hover with CSS
</h2>
<p>
In this example we have used <strong>scale()
</strong> method to zoom/scale an image on
hover with CSS.
</p>
<div class="scale">
<img src="/html/images/test.png">
</div>
</body>
</html>
使用 zoom 屬性縮放
在這種使用 CSS 在懸停時縮放元素的方法中，我們使用了 zoom 屬性，它可用於控制元素的放大級別。
- 首先，我們使用 div 建立了一個正方形。
- 我們使用了:hover偽類在懸停在類 zoom 上時應用效果。
- 我們使用了"zoom: 1.2;" 來縮放具有類 zoom 的 div 元素。
- 在示例 2 中，我們使用了一個影像而不是正方形，使用 :hover 偽類在類 zoom 上應用縮放效果。
示例 1
這是一個完整的示例程式碼，實現了上述步驟，使用 CSS zoom 屬性在懸停時縮放元素。
<html lang="en">
<head>
<title>
Zoom Using zoom Property
</title>
<style>
.zoom {
margin-left: 100px;
margin-top: 50px;
height: 150px;
width: 150px;
background-color: #04af2f;
transition: zoom 0.2s ease;
}
.zoom:hover{
zoom: 1.2;
}
</style>
</head>
<body>
<h2>
Zoom/Scale an Element on Hover with CSS
</h2>
<p>
In this example we have used <strong>zoom
</strong> property to zoom/scale a div
element on hover with CSS.
</p>
<div class="zoom"></div>
</body>
</html>
示例 2
這是一個完整的示例程式碼，實現了上述步驟，使用 CSS zoom 屬性在懸停時縮放影像。
<html lang="en">
<head>
<title>
Zoom Using zoom Property
</title>
<style>
.zoom {
margin-left: 100px;
margin-top: 50px;
transition: zoom 0.2s ease;
}
.zoom:hover {
zoom: 1.2;
}
</style>
</head>
<body>
<h2>
Zoom/Scale an Element on Hover with CSS
</h2>
<p>
In this example we have used <strong>zoom
</strong> property to zoom/scale an image
on hover with CSS.
</p>
<div class="zoom">
<img src="/html/images/test.png">
</div>
</body>
</html>
結論
在這篇文章中，我們瞭解瞭如何使用 CSS 在懸停時縮放元素。我們討論了兩種不同的方法：使用CSS scale() 方法和使用CSS zoom 屬性。但是，zoom 是一個非標準的 CSS 屬性，建議使用 scale() 方法來獲得相同的結果。
更新於：2024年8月13日
3K+ 瀏覽量
廣告