次の画像を考えると、この問題にどのようにアプローチするのが最善か本当にわかりません.
つまり、スプライト画像を作成し、各リンク/アイコンを絶対的に配置して、ホバー状態が発生したときにそれらが互いにプッシュされないようにすることができます。ただし、問題は、クリック可能な領域がホバー状態で拡大するため、他のボタンが重なってクリックしにくくなることです。
任意の提案/アイデアをいただければ幸いです。
乾杯！
@ioannis-karadimas のおかげで私の解決策
質問する
115 次
3 に答える
1
試したことはありませんが、うまくいくはずだと思います。
.button:hover:after {
display: inline;
position: absolute;
left: 60px; // button's width / 2
width: 150px;
height: 150px;
background-image:url('cross.png');
}
于 2012-07-07T08:01:57.453 に答える
1
動きがなければ、トリガー領域を画像自体から分離できない理由はありません。すべてのトリガーをグラフィックスの上にある非表示の div にすると、クリック可能な領域が一定で予測可能になります。画像を別の画像に重ねたり、スプライトの配置を変更したりするなど、グラフィックスの変更は、クリック可能な領域にまったく関係する必要はありません。
最初の配置とデバッグに役立つように、最初に各レイヤーの周りに境界線を配置してから、グラフィックスの上に配置できます。完了したら、境界線を削除し、レイヤーを透明にして、完全に透明な GIF で塗りつぶします。
于 2012-07-07T08:05:26.747 に答える
0
アイコンコンテナ内に絶対配置要素（または疑似要素）を作成し、マウスオーバーで表示する必要があります。したがって、ホバー領域には影響しません。
疑似要素の例を次に示しますが、IE < 8 のサポートが必要な場合は、通常の要素を追加するだけです。
于 2012-07-07T08:04:45.307 に答える