使用 HTML 和 CSS 实现具有悬停效果的响应式卡片

csshtmlweb developmentfront end technology更新于 2024/4/16 6:04:17

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

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

语法

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

.card:hover {
/* 添加用于悬停时设置的 CSS */
}

在上述语法中，"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>

用户学习了如何创建响应式卡片并为其添加悬停效果。在第一个示例中，我们添加了简单的悬停效果，该效果会在悬停时更改卡片的背景颜色。

在第二个示例中，当用户将鼠标悬停在卡片上时，我们会显示卡片的描述。