1

画像のグリッドがあるページがあります。これらの画像の不透明度は、最初はゼロに設定されています (つまり、非表示になっています)。マウスを画像の上に移動すると、その不透明度はすぐに 1 に設定され、マウスを離すと、不透明度はすぐに 0 に戻ります。関連するコードは次のようになります。

HTML

<img class="Image" src="./img/foo.png">

CSS

.Image {
    opacity: 0;
}

JS

$(".CircleImage").hover(
    function() {
        $(this).fadeTo(0,1);  // mouseenter
    },
    function() {
        $(this).fadeTo(200,0);  // mouseleave
    }
);

今:この画像グリッドの上に表示されるリンクをいくつか追加したいと思います。キャッチは次のとおりです。画像がホバー動作を維持するようにしたいと思います。非常に注意が必要な点は、各リンクのテキストが複数の画像にまたがり、リンク テキストと画像のサイズがウィンドウ サイズによって動的に変更されることです。

たとえば、テキストが「クリックしてください」というリンクがあり、ある特定のウィンドウ サイズで、「クリック」の「cli」が 1 つの画像の上にあり、「me」が別の画像の上にあるとします。マウスが「cli」の上にあるとその下の画像が表示され、「me」の上にあるとそのテキストの下の画像が表示され、その間ずっとリンクをクリックできるようにページを動作させたい.

つまり、最上位の要素だけでなく、その下の要素に対してもホバー動作がトリガーされるようにしたいと考えています。

これを達成する方法について何か提案はありますか?

4

1 に答える 1

0

画像とリンクをコンテナーにラップし、そのコンテナーの不透明度を変更できます。

<span class="imgContainer">
    <a href="#">X</a>
    <img class="Image" src="./img/foo.png" width="100" height="100">
</span>

.imgContainer {
    opacity: 0.1;
    width: 100px;
    height: 100px;
}

.imgContainer a {
    position: absolute;
}

デモ

于 2012-06-29T15:17:02.927 に答える