Question

当我将鼠标悬停在父div上时，尽管设置line-height: 3em !important", the child line-height`永远不会改变。

HTML：

<div class="container">
  <div class="text">
    text
  </div>
</div>

CSS：

.container
{
    position: relative;
    margin-top: 1.25em;
    margin-left: 1em;
    height: 2.125em;
    width: 2.125em;
    float: left;
    border: solid 3px #143a58;
    background-color: #57b7e2;
    -webkit-border-radius: 2.125em;
    -moz-border-radius: 2.125em;
    border-radius: 2.125em;
    overflow: visible;
    cursor: pointer;
}

.container:hover
{
    width: 2.25em;
    height: 2.25em;
    margin-top: 1.1875em;
    margin-left: .9375em;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    line-height: 3em !important;
}

.container .text
{
    position: relative;
    font-family: LatoRegular, Arial, Helvetica;
    font-size: .75em;
    font-weight: bold;
    line-height: 2.833em;
    color: #143a58;
    text-align: center;
}

Answer 1

试试这个：

.container:hover > .text{
  // other css code
  line-height: 3em;
}

使用＆gt;选择器，当您将父.container元素悬停时，CSS规则应该改变.text子元素的行高，而不是.container本身的行高。

Answer 2

因为.text在类属性中已经有line-height: 2.833em;，它会覆盖通过级联来自父级的line-height。要解决此问题，只需在悬停（demo）时更改line-height的{{1}}：

.text

为什么父母的悬停状态不会改变孩子的行高，即使是“！important”？

2 个答案: