使用 HTML 和 CSS 创建响应式卡片并添加悬停效果

在为应用程序创建响应式设计时，也需要创建响应式卡片设计。有时，开发人员需要在卡片上添加悬停效果。因此，当用户将鼠标悬停在卡片上时，它应该更改卡片的样式。

在这里，我们将学习如何在卡片上添加悬停效果，并在用户将鼠标悬停在卡片上时更改 CSS。

语法

用户可以按照以下语法将悬停效果添加到卡片。

.card:hover {
   /* add css to set to element on hover */
}

在上述语法中，card 是 div 元素 的类名，并且使用 :hover，我们可以将 悬停 效果添加到卡片 div 元素。

示例

在下面的示例中，我们创建了带有“card”类名的 div 元素。此外，我们还在卡片中添加了一张图片和描述。

我们使用 CSS 来设置卡片的样式。我们为卡片设置了 10% 的宽度和最小宽度。此外，我们还在卡片上添加了悬停效果。我们向卡片添加了一个轮廓，并在用户将鼠标悬停在卡片上时更改 背景颜色。

Open Compiler
<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>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

示例

在下面的示例中，我们创建了类似于第一个示例的卡片。此外，我们还为卡片设置了 15% 的宽度。因此，它是响应式的。

在输出中，用户可以观察到，最初卡片中图像的描述是隐藏的，但是当用户将鼠标悬停在卡片上时，它会显示描述。在这里，我们在用户将鼠标悬停在卡片元素上时更改 card-content div 元素的显示。

此外，我们还在卡片 div 中添加了过渡效果。

Open Compiler
<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+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告