数据结构
网络
关系型数据库管理系统
操作系统
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+ 浏览量
广告