时间戳

首页 > 解决方案 > 如何隐藏 flexbox 中的文本，然后在 flexbox 项目悬停时使其显示？

css - 如何隐藏 flexbox 中的文本，然后在 flexbox 项目悬停时使其显示？

问题描述

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

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

标签： cssflexboxhoverhidden

解决方案

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

推荐阅读