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

Your code is wrong. SPAN is an INLINE element, but you placed DIV (block element) inside it. It's not valid. You can use ONLY inline elements inside another inline elements.

This is not good solution, but :hover will work for you if you add {display:block;} property to span (article.sliki > span).

于 2013-04-16T16:56:06.650 に答える