0

我不知道为什么，但是 :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;
}
4

1 回答 1

1

你的代码是错误的。SPAN 是一个 INLINE 元素，但您在其中放置了 DIV（块元素）。这是无效的。您只能在另一个内联元素中使用内联元素。

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

于 2013-04-16T16:56:06.650 回答