跨度：悬停在 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（块元素）。这是无效的。您只能在另一个内联元素中使用内联元素。

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