0

誰かがこの問題で私を助けてくれることを願っています。

:hover は Firefox では機能しません。Google Chrome、Safari、IE では問題なく動作します。IE ではアニメーションは機能しませんが、肉厚ではなく、少なくとも機能します。jqueryで解決する方法は知っていますが、解決策ではありません。

ありがとうございました

HTML:

     <article>
        <div class="over">
            <span class="text">
            <h3></h3>
            </span>
        </div>
        <div></div>

        <div class="over">
            <span class="text">
            <h3></h3>
            </span>
        </div>
        <div></div>

        <div class="over">
            <span class="text">
            <h3></h3>
            </span>
        </div>
        <div></div>

        <div class="over">
            <span class="text">
            <h3></h3>
            </span>
        </div>
        <div></div>
    </article>

CSS:

article > div.over {
   width: 25%;
   height: 100%;
   display: inline-block;
   float: left;
   position: absolute;
   border: 0;
   margin: 0;
   padding: 0;
   background: rgba(55,55,55,0.6);
   color: #FFF;
   opacity: 0;
   z-index: 1000;
}
article > div.over: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;
}

プレビュー: http://reveofficial.com/fashion.php

4

1 に答える 1

1

あなたの問題は<div class="over">、Firefox ですべてが重なり合ってしまうことです。一見したところ、これは実際には仕様で要求されているレンダリングです (仕様が自動オフセットの絶対配置 div の特定のレンダリングを要求する範囲で)。しかし、仕様では、ここでの動作はほとんど未定義のままです。

これらの div に非自動オフセット (具体的には、 、 、 、 に設定) を与えることをお勧めします。leftこれにより、CSS 仕様で明示的に定義されていない動作に依存せず、確実に配置したい場所に実際に配置されます。025%50%75%

于 2013-07-15T04:10:08.443 に答える