如何隐藏灵活框中的文本，然后在灵活框项目悬停时使其显示

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

没有问题：(

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

//如果你只是想要一个简单的隐藏/展示.cards_med:not(：悬停(.cads_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>
``

Answer 2

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