css - 跨度 :hover won't work in Firefox

Question

我不知道为什么，但是 :hover 在我的代码上无法在 Firefox 中运行。它在 Chrome 和 Safari 中运行完美，即使在 IE 中也运行良好。

我也尝试过使用 .over，但没有任何改变。

html代码:

<div id="proekti">
        <article id="red1" class="sliki">
            <span>
                <div class="text">
                <h3></h3>
                </div>
            </span>
            <div></div>

            <span>
                <div class="text">
                <h3></h3>
                </div>
            </span>
           <div></div>

            <span>
                <div class="text">
                <h3></h3>
                </div>
            </span>
            <div></div>

            <span>
                <div class="text">
                <h3></h3>
                </div>
            </span>
            <div></div>
        </article>
</div>

CSS 代码:

#proekti .sliki > div {
    width:25%;
    display:inline;
    float:left;
    position:relative;
    border:0;
    margin:0;
    padding:0;
    overflow:hidden;
}

article.sliki > span {
    width:25%;
    height:100%;
    display:inline-block;
    position:absolute;
    border:0;
    margin:0;
    padding:0;
    overflow:hidden;
    background: rgba(55,55,55,0.6);
    color:#FFF;
    opacity:0;
    z-index:1000;
}

article.sliki > span:hover {
    transition:all 1s ease-out;
    -webkit-transition:all 1s ease-out;
    -moz-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
    opacity:1;
}

Answer 1

您的代码有误。 SPAN 是一个 INLINE 元素，但您在其中放置了 DIV( block 元素)。这是无效的。您只能在另一个内联元素中使用内联元素。

这不是好的解决方案，但是如果您将 {display:block;} 属性添加到 span (article.sliki > span)，则 :hover 将为您工作。