0

CSS 画像スプライトを使用して、特定の領域にカーソルを合わせると画像の一部が変化する「インタラクティブな」画像を作成しています。すべて正常に動作しますが、ホバー領域の上にいると、ホバー領域を制御できるようになるのに苦労しています。

たとえば、メイン領域が 400x400 ピクセルで、ホバー領域が左上隅から 100x100 ピクセルであるとします。ホバー領域に移動すると、表示される「新しい」画像は 200x200 になります。これは表示されますが、この「新しい」200x200 画像がアクティブになります。その後、この新しい画像 (つまり 150x150) 内のどこにでも移動できます。元の 100x100 のホバー領域の外に出ても、ホバー画像はまだそこにあります。200x200 のホバー画像が表示されていても、アクティブ領域が常に 100x100 になるようにこれを抑制する方法はありますか?

私の（カットダウン）CSS（areaTest.css）は次のとおりです。

#bigArea {
    width: 400px;
    height: 400px;
    background: url(areaImage.jpg) no-repeat;
    margin: 10px auto; padding: 0;
    position: relative;
}

#bigArea li {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
    position: absolute;
}
#bigArea a {
    display: block;
    text-indent: -9999px;
    text-decoration: none;
}

#littleArea {
    width: 100px;
    height: 100px;
}
#littleArea a {
    width: 100px;
    height: 100px;
}
#littleArea a:hover {
    width: 200px;
    height: 200px;
    background: url(areaImage.jpg) 0px -410px no-repeat;
}

私のHTMLは次のとおりです。

<link href="areaTest.css" rel="stylesheet" type="text/css">
<div>
    <ul id="bigArea">
        <li id="littleArea"><a href="#"></a></li>
    </ul>
</div>

どんな助けでも大歓迎です。

ありがとう、ジャム

4

2 に答える 2

2

私は京夢のソリューションをフォークし、反対を適用しました: http://jsfiddle.net/FEkcx/

は、実際に背景画像を持つ の<a>上にある空のブロックです。<div>ホバーは を使用してトリガーされ#littleArea a:hover + divます。

于 2012-07-02T16:20:05.100 に答える
0

さて、私には解決策があります。トリガーしたくない部分を「覆い隠し」ます（例：空のdivを使用）。こうすることで、オブジェクトにホバーしなくなります。

例

セレクター（ など+）を使用するより良い方法があると思いますが、これは機能します。

于 2012-07-02T15:15:24.073 に答える