如何在悬停的指定卡片下方显示专属提示消息？

Got it, let's get those unique hover messages set up for your cards! It's a simple tweak to your existing code—here's how to make it work:

Step 1: Update Your HTML Structure #

First, we'll add a tooltip element inside each card (right after the .box div). This will hold the one-of-a-kind message for each card:

<div class="main-section">
  <div class="container">
    <!-- Card 1 -->
    <div class="card">
      <div class="box">
        <div class="content">
          <h2>01</h2>
          <h3>Card One</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <a href="#">Read More</a>
        </div>
      </div>
      <div class="card-tooltip">This is the special tip for Card One!</div>
    </div>

    <!-- Card 2 -->
    <div class="card">
      <div class="box">
        <div class="content">
          <h2>02</h2>
          <h3>Card Two</h3>
          <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <a href="#">Read More</a>
        </div>
      </div>
      <div class="card-tooltip">Card Two has its own unique message here!</div>
    </div>

    <!-- Card 3 -->
    <div class="card">
      <div class="box">
        <div class="content">
          <h2>03</h2>
          <h3>Card Three</h3>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
          <a href="#">Read More</a>
        </div>
      </div>
      <div class="card-tooltip">Check out Card Three's exclusive tip!</div>
    </div>
  </div>
</div>

Step 2: Modify Your CSS #

Next, add these styles to handle the tooltip visibility and positioning. We'll make sure the tooltip only shows when the card is hovered, and fits perfectly in the gap left by the upward-moving .box:

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons { margin-left: -40%; }
button { border: none; position: absolute; }
.fas { background: #ebf5fc; padding-top: 500%; color: yellowgreen; font-weight: 600; }
audio { margin-top: 40%; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'poppins', sans-serif; }
#my_audio { margin-top: -40%; }
.main-section { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #ebf5fc; }
.container { display: flex; justify-content: center; align-items: center; max-width: 1200px; flex-wrap: wrap; padding: 40px 0; }
.container .card { position: relative; width: 320px; height: 440px; box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5); border-radius: 15px; margin: 30px; }
.container .card .box { position: absolute; top: 20px; left: 20px; right: 20px; bottom: 20px; background: #ebf5fc; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); border-radius: 15px; display: flex; justify-content: center; align-items: center; transition: 0.5s; }
.container .card:hover .box { transform: translateY(-50px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); background: linear-gradient(45deg, #b95ce4, #4f29cd); }
.container .card .box .content { padding: 20px; text-align: center; }
.container .card .box .content h2 { position: absolute; top: -10px; right: 30px; font-size: 8em; color: rgba(0, 0, 0, 0.02); transition: 0.5s; pointer-events: none; }
.container .card:hover .box .content h2 { color: rgba(0, 0, 0, 0.05); }
.container .card .box .content h3 { font-size: 1.8em; color: #777; z-index: 1; transition: 0.5s; }
.container .card .box .content p { font-size: 1em; font-weight: 300; color: #777; z-index: 1; transition: 0.5s; }
.container .card:hover .box .content h3, .container .card:hover .box .content p { color: #fff; }
.container .card:hover .box .content p { font-style: italic; color: gold; }
.container .card .box .content a { position: relative; display: inline-block; padding: 8px 20px; background: #03a9f4; margin-top: 15px; border-radius: 20px; color: #fff; text-decoration: none; font-weight: 400; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
.container .card:hover .box .content a { background: #ff568f; }
#i1 { width: 100%; height: 50px; }
h1 { text-align: center; font-size: 65px; font-style: italic; }
#love { color: red; }
#shape { width: 150px; height: 150px; border-radius: 50%; margin-left: 45%; margin-top: -12%; }

/* --- NEW TOOLTIP STYLES --- */
.container .card .card-tooltip {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  border-radius: 8px;
  font-size: 0.9em;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
  width: 80%;
  text-align: center;
}

.container .card:hover .card-tooltip {
  opacity: 1;
  visibility: visible;
  bottom: 10px; /* Adjust this value to tweak the tooltip's position in the gap */
}

How It Works #

• Tooltip Anchoring: The .card-tooltip is positioned absolutely relative to its parent .card, so it stays tied to the card's original location.
• Hover Trigger: When you hover over the card, the .box slides up, and we toggle the tooltip's visibility and opacity to make it appear in the empty space.
• Custom Messages: Just edit the text inside each .card-tooltip div to give every card its own personalized message.

Feel free to adjust the tooltip's background color, padding, or bottom value to match your design vibe!

内容的提问来源于stack exchange，提问作者Code cracker