CSS:悬停选择器未被触发

时间:2014-07-28 17:28:26

标签: html css css3

每当我将鼠标悬停在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;
}

1 个答案:

答案 0 :(得分:0)

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