Parent Div = 向左浮动。 Child Div 不显示文本

Question

所以我有一个 parent div（方框一），其中有一个浮点数：左。我的childdiv(hover-state)基本上只是悬停状态。 child 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，所以它可以继承给所有孩子。像这样重置您的代码：

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

看到它有效：

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

Answer 2

删除 font-size 或更改它。这是由所有 children 继承的，没有显示任何内容：

.roster > div {
  font-size: 10pt;
}

Fiddle: https://jsfiddle.net/fq0jsapb/

Parent Div = 向左浮动。 Child Div 不显示文本

Parent Div = Float Left. Child Div Not Displaying Text

html

css

parent