資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究使用 HTML 和 CSS 建立響應式卡片並新增懸停效果
在為應用程式建立響應式設計時，也需要建立響應式卡片設計。有時，開發人員需要在卡片上新增懸停效果。因此，當用戶將滑鼠懸停在卡片上時，它應該更改卡片的樣式。
在這裡，我們將學習如何在卡片上新增懸停效果，並在使用者將滑鼠懸停在卡片上時更改 CSS。
語法
使用者可以按照以下語法將懸停效果新增到卡片。
.card:hover {
/* add css to set to element on hover */
}
在上述語法中，card 是 div 元素 的類名，並且使用 :hover，我們可以將 懸停 效果新增到卡片 div 元素。
示例
在下面的示例中，我們建立了帶有“card”類名的 div 元素。此外，我們還在卡片中添加了一張圖片和描述。
我們使用 CSS 來設定卡片的樣式。我們為卡片設定了 10% 的寬度和最小寬度。此外，我們還在卡片上添加了懸停效果。我們向卡片添加了一個輪廓，並在使用者將滑鼠懸停在卡片上時更改 背景顏色。
<html>
<head>
<style>
.card {
width: 10%;
height: auto;
background-color: grey;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin: 20px;
border-radius: 12px;
min-width: 150px;
}
.card:hover {
/* add outline on the card */
outline: 5px solid red;
/* change background color on hover */
background-color: aqua;
}
img {
width: 95%;
height: 50%;
padding: 10px;
margin-top: 5px;
border-radius: 12px;
}
p {
font-size: 1.2rem;
justify-content: space-around;
margin-top: -5px;
padding: 1px;
}
</style>
</head>
<body>
<h2>Creating the <i> responsive card with hover effect </i> using HTML and CSS</h2>
<p>Please hover the cursor over the below card to see the effect</p>
<div class = "card">
<img src ="https://media.licdn.com/dms/image/C4E0BAQH5VgzmVzs-1Q/company-logo_200_200/0/1519883935014?e=2147483647&v=beta&t=dySBu3kqK_BgGOwVbEyNrB7qXAZxOk3befdkJ2INgzQ" alt = "logo">
<div class = "content">
<p> TutorialsPoint is one of the best platforms to learn about all leading programming languages and technologies. </p>
</div>
</div>
</body>
</html>
示例
在下面的示例中，我們建立了類似於第一個示例的卡片。此外，我們還為卡片設定了 15% 的寬度。因此，它是響應式的。
在輸出中，使用者可以觀察到，最初卡片中影像的描述是隱藏的，但是當用戶將滑鼠懸停在卡片上時，它會顯示描述。在這裡，我們在使用者將滑鼠懸停在卡片元素上時更改 card-content div 元素的顯示。
此外，我們還在卡片 div 中添加了過渡效果。
<html>
<head>
<style>
.card {
width: 15%;
height: auto;
background-color: green;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
margin: 20px;
border-radius: 12px;
min-width: 150px;
padding: 10px;
transition: 0.8s ease-in-out;
}
.card:hover {
/* add outline on the card */
outline: 5px solid red;
/* change background color on hover */
background-color: yellow;
}
img {
width: 100%;
height: 50%;
border-radius: 12px;
}
.card-content {
font-size: 1.2rem;
justify-content: space-around;
margin-top: 5px;
display: none;
transition: 1.3s ease-in-out;
}
.card:hover .card-content {
display: block;
transition-delay: 1.3s;
}
</style>
</head>
<body>
<h2>Creating the <i> responsive card with hover effect </i> using HTML and CSS.</h2>
<div class = "card">
<div class = "image">
<img src = "https://www.codecademy.com/resources/blog/wp-content/uploads/2022/12/should-i-learn-javascript-1.png" alt = "JS image">
</div>
<div class = "card-content">
JavaScript is a programming language used primarily for web development that allows for dynamic and interactive web pages. It is a client-side scripting language that can be executed directly in a user's browser without the need for additional software installations. JavaScript is used for a wide range of applications, including web development, mobile app development, and game development.
</div>
</div>
</body>
</html>
使用者學習瞭如何建立響應式卡片並在卡片上新增懸停效果。在第一個示例中，我們添加了簡單的懸停效果，該效果會在懸停時更改卡片的背景顏色。
在第二個示例中，當用戶將滑鼠懸停在卡片上時，我們顯示卡片的描述。
更新於： 2023年11月21日
1K+ 瀏覽量
廣告