如何将弹性框中的文本隐藏起来，然后将其悬停在弹性框项目上时显示？

如何解决如何将弹性框中的文本隐藏起来，然后将其悬停在弹性框项目上时显示？

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

<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;

解决方法

我不确定要隐藏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
}

,

没问题：）

您要避免在页面上使用多个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>
``