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＆gt; span），hover将适合你。

span：hover在Firefox中不起作用

1 个答案: