如何隐藏 flexbox 中的文本，然后在将鼠标悬停在 flexbox 项目上时使其显示？

Question

我希望隐藏框中的黑色文本（我选择麦德林），但是当我将鼠标悬停在实际的网格项目上时，我希望它出现。这怎么可能？

<main id="cards">
        <a href="signup.html"><section class="cards__med">
            <div class="cards__flexchild">
                <h1 class="cards__med-title">Medellín</h1>
                <img class="cards__medimage" src="img/medellin.jpeg" alt="medellin">
                <h1 class="cards__texthead">The City of Eternal Spring</h1>
                
                <!-- <a href="signup.html" class="cards__med-btn">Choose City</a> -->
                <h1>I choose Medellín!</h1>
            </div>
        </section></a>
    
   #cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    margin-top: 3rem;

Answer 1

我不确定 HTML 中的哪个元素是您想隐藏的，但您可以根据需要调整以下内容：

CSS

.selector:not(:hover) .item-reveal {
  opacity:0; // If you want the area the hidden content will occupy to stay the same height
  display:none; // If you want to completely hide the element
}

Answer 2

没问题:)

您希望避免在一个页面上使用多个 H1 来维护文档大纲，但您可以简单地使用诸如：

// 如果你只是想要一个简单的隐藏/显示 .cards__med:not(:hover) .cards__med-btn { display:none; }

如果可能的话，我也会尝试稍微清理一下 HTML，因为有多个嵌套元素会抛出验证错误和多个 h1：

<div href="signup.html" class="cards__med cards__flexchild">
      <h1 class="cards__med-title">Medellín</h1>
      <img class="cards__medimage" src="img/medellin.jpeg" alt="medellin">
       <h2 class="cards__texthead">The City of Eternal Spring</h2>
                
       <a href="signup.html" class="cards__med-btn">Choose City</a>
</div>
``

如何隐藏 flexbox 中的文本，然后在将鼠标悬停在 flexbox 项目上时使其显示？

How do I make text in a flexbox hidden and then make it appear when the flexbox item is hovered over?

css

hidden

hover

flexbox

CSS