html - 父 Div = 向左浮动。子 Div 不显示文本

Question

所以我有一个带有 float: left 的父 div(框一)。我的 child div(悬停状态)基本上只是悬停状态。子 div 有 2 个文本元素和一个下划线。下划线显示但文本元素未显示。如果您查看 jsfiddle，并将鼠标悬停在白框上，您就会明白我的意思。

        <div class="box one">
            <div class="hover-state">

                <h3>This Artist</h3>
                <div class="line"></div>
                <h4>some text</h4>

            </div>
        </div>

https://jsfiddle.net/8fx9f6xb/

Answer 1

您在 .roster 中有 font-size: 0，所以它可以继承给所有 child 。像这样重置您的代码:

.roster > div {
     font-size: 1rem; 
}

看到它工作:

https://jsfiddle.net/8fx9f6xb/1/