父Div =左浮。儿童Div不显示文本

Question

所以我有一个父div（方框一），浮动：左。我的孩子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

font-size: 0中有.roster，因此它会继承所有孩子。重置您的代码：

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

看到它正常工作：

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

Answer 2

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

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

小提琴：https://jsfiddle.net/fq0jsapb/