Question

每当我将鼠标悬停在div上时，它都不会触发：悬停选择器。但是当我强制：将ins悬停在Inspector上时，hover的css会被应用。我的代码出了什么问题？

HTML：

<div class='subject paper'>
    <div class='subjectHeader'>Physics</div>
    <div class='subjectContent'></div>
</div>

CSS：

div.subject > div.subjectHeader {


    height: 200px;
    width: 100%;
    color: white;
    font-family: 'Lato', 'Helvetica', sans-serif;
    font-weight: 700;
    font-size: 1.8em;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    line-height: 200px;
    transition: all 0.7s cubic-bezier(0.4,0,0.2,1);

}

div.subject > div.subjectHeader:hover {
    height: 30px !important;
    line-height: 30px !important;
    font-size: 1.5em !important;
    text-align: left !important;
    padding-left: 10px !important;
}

Answer 1

这只是z-indexing的一个问题。我刚刚给.subject div的容器提供了一个正值z-index。身体在div上方阻碍悬停选择器不被触发。我重新安排了z-indeces，使得主体位于.subject div的容器下。

CSS：悬停选择器未被触发

1 个答案: