span：hover在Firefox中不起作用

Question

我不知道为什么，但是：hover不能在我的代码中的Firefox中工作。即使在IE中，它也能在Chrome和Safari中完美运行。

我也尝试过.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（块元素）。 这是无效的。 您只能在另一个内联元素中使用内联元素。

这不是一个好的解决方案，但如果您将{display：block;}属性添加到span，：hover将为您工作（article.sliki> span）。