3

何が起こるか本当に怖いです。私はいくつかのアニメーション、少しのjQueryを使用したCSS3D変換を使用して小さなサイトを構築しています。

ここに置くには少し長すぎるコードなので、このjsfiddleを作成します。

とにかく、構造は非常に単純です（これは、ベンダープレフィックス以外の完全なコードですarticle）：

<section>
  <article>
    <h1>2012</h1>
  </article>
  <article>
    <h1>2013</h1>
  </article>
</section>

.article {
  position: absolute;
  width: 370px;
  height: 250px;
  margin-bottom: 120px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  background: grey;
  z-index: 50;
  box-shadow: -5px 0 3px -4px rgba(0, 0, 0, 0.6);
  -webkit-box-reflect: below -10px -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0.2) 0%, transparent 40%, transparent 100%);
  transition: margin-top 0.3s, width 0.3s, height 0.3s, -webkit-transform 0.3s, top 0.3s, left 0.3s;
  transform: perspective(900px) rotateY(25deg) translateZ(-90px);
}

section article:hover {
  margin-top: -30px;
  width: 430px;
  height: 310px;
  cursor: pointer;
  box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.8s;
  transform: perspective(100px) rotateY(0deg) translateZ(0);
}

問題は、ページにアクセスしたときに、機能する場合と機能し:hoverない場合があることです。記事に他の要素が含まれていることがあるようですが、これ以上要素がないことを確認すると、実際には不可能でした。本当に追加する必要はありません（記事をクリックした直後に表示さz-indexれるクラスがあります）、それがなくても同じことが起こります。.activoうまくいくこともあれば、うまくいかないこともあります…</ p>

例へのリンクを試して、数回リロードしてください。これはSafari、Chrome、Firefoxで発生します—FFでは少しうまく機能するようです。

ページをリロードし、ロード中にマウスを使用して要素にすばやく移動すると（記事にカーソルを合わせると）、期待どおりに機能することがわかりました。ロードされるまでホバーを取得するまで待つと、機能しません。

さらに、ホバーされた記事の右側にある次の記事を管理するためのjQueryが少しあります。JavaScriptを使用する必要があるのは、兄弟要素をホバーした後に場所を見つける必要があり、margin-right絶対位置の要素であるためホバーした要素を使用することさえできないためです。クリックすると、それらがカバーされるため、絶対である必要があります。全身。

$('article').hover(function (event) {
    $(this).nextAll('article').each(function () {
        izquierda = izquierda_original[$(this).attr('id')].izquierda + 360;
        $(this).css('left', izquierda + 'px');
    });
}, function (event) {
    $(this).nextAll('article').each(function () {
        izquierda = izquierda_original[$(this).attr('id')].izquierda;
        $(this).css('left', izquierda + 'px');
    });
});

izquierda_original[]left各要素の元の値を含む単なるオブジェクトです。

前もって感謝します。

編集私は最終的に問題がbody要素であることを理解します。それの高さが記事を発生させるとき、私はそれらをホバリングすることができません。これはさらに奇妙です。それbodyは、子要素をホバーするようなものです。

4

1 に答える 1

3

何らかの理由で、bodyタグが要素をオーバーレイしています。

これが私のためにそれを修正したものです。

z-indexまず、次のようにbodyタグにを追加します。

body{
z-index: 1;
position: relative;
}

z-index次に、セクションに上位を追加します。

section{  
z-index: 2;
position: relative;
}

これにより、背景が保持され、要素が機能し続けます。

于 2013-03-24T11:14:41.107 に答える