1

私はちょっとしたサイド プロジェクトに取り組んでいて、効果を達成するための最善の方法を見つけるのに少し苦労していて、誰かが私を正しい方向に向けてくれることを望んでいました. ウェブサイトは [編集済み] で、私がこれまでに使用したすべてのコードについて [編集済み] を確認できます。コード ブロックは、この投稿の下部にあります。

これは非常に単純な概念であり、私がこれを機能させたい方法は次のとおりです。

  1. 体にカーソルを合わせると、体全体のさまざまなアイコンが一度にフェードインします。

  2. 特定のアイコンにカーソルを合わせると、そのアイコンが明るくなります (より不透明になります)。

  3. ユーザーは、他の div がフェードインするこれらの領域の 1 つをクリックできます (これはおそらく jquery で行われます)。

ご覧のとおり、ステップ 1 は機能しています。現在、2 つの画像があります。1 つはプレーンで、もう 1 つは、訪問者がホバーして操作できるようにするすべての機能を含んでいます。それらは絶対に重なって配置され、そのうちの 1 つはホバーされるまで見えません。

ホバーすると非表示から不透明になる画像のように、ハイライトされる機能ごとに 1 つずつ、自分の画像をさらにいくつか作成したいと考えていました。たとえば、ハートの上にカーソルを置くと、イメージが明るいハートを持つ新しいイメージに置き換えられます。

私の問題は、これを達成するための最良の方法が本当にわからないことだと思います。私の説明が明確であったことを願っています。これについて助けていただければ幸いです。画像マップは解決策ではないようで (私が間違っているかもしれません)、画像マップはかなり古くなっていると読みました。それは私を夢中にさせています！

よろしくお願いします。

パトリック

    .fade {
     opacity: 0;
     transition: opacity .25s ease;
     -moz-transition: opacity .25s ease;
     -webkit-transition: opacity .25s ease;
     }
    .fade:hover {
     opacity: 1;
     }
    <div style="height:100%">
      [redacted]   
    </div>
4

4 に答える 4

1

簡単な答えは、ステップ 2 を達成するために、z-index を使用してから要素にホバー クラスを適用する必要があるということです。ステップ 3 には明らかにいくつかの js が必要です。

アップデート

JavaScript をすぐに動作させることができませんでした。時間もあまりありません。

http://jsfiddle.net/Et2Wp/2/

別の画像の上に画像を読み込んでいますが、それはあなたが達成しようとしているものでは機能しません。各アイテムを個別の要素として作成し、それらを体に絶対配置する必要があります。現在、各要素は色付きの正方形で表されています。明らかに、必要なアイテムの画像/背景画像でスタイルを設定します。

フェードインする各要素にメインクラスがあります。これは、css display:none を適用し、javascript を使用してホバーですべてフェードインできるようにするためです。

ステップ 2 を達成するには、必要:hoverなスタイリングの各要素 ID にクラスを適用するだけです。

最後に、ステップ 3 を達成するには、別の div のセットを非表示にする必要があります (つまり<div id="phoneContent") 。

JavaScript を使用して、次のようなクリック イベントでそれらを取り込みます。

$('#phone').click(function() {
 $('#phoneContent').slideToggle();
});

まだ問題がある場合は、後で戻って完了することができますが、今すぐ実行する必要があります。これがお役に立てば幸いです

于 2013-11-07T00:49:44.210 に答える
0

あなたはこれを間違った方法でやっています。各アイコンは個別の要素 (img または背景付きの div) である必要があります。その後、好きなエフェクトを簡単に実行できます。

于 2013-11-07T01:12:35.043 に答える
0

ここで、Jquery にカーソルを合わせるとわかります。

実際の例

実行を押して、生成されたリンクをクリックして確認してください。CSS を使用しようとしているように見えますが、このような例では、複数のブラウザーでより適切に機能します。Jquery の方が適しています。

ホバーすると画像が表示され、ホバー オフすると画像が消えます。

于 2013-11-07T00:59:06.987 に答える
0

画像を絶対的に配置する場合は、アイコンごとに要素を追加して、それらを絶対的に配置するだけです。

すなわち


等

こうすることで、最初はすべてのアイコンが一緒にフェードインし、個別に表示されるとハイライトされます。

明らかに、画像のサイズをより静的にする必要があります。つまり、高さ: 500px; 高さの代わりに:100%;

于 2013-11-07T01:14:46.113 に答える