1

マウスが来ると別の画像に変わる特定の画像を作成したい。これはリンクを作成することでcssで簡単です。このリンクは画像が変化する部分として機能します。正方形のホバーを作成する場合は問題ありません。

しかし、斜めの画像にホバーしたいのですが、どうすればいいですか?

たとえば、この画像:- マウスをリンク 1 に合わせると、たとえば、画像が白い画像に変わります。

4

1 に答える 1

0

最も簡単な方法は、透明な領域を持つ適切に配置された画像 (オーバーレイ) を使用することです。画像を使用したくない場合、私が考える唯一の方法は、ボーダー ハックを使用して三角形/対角線を作成することです。Stu Nicholls のサイト (www.cssplay.com) で後者の外観を選択した場合、私は何年も前にそれを学びましたが、CSS が進むにつれてかなり高度になっていることに注意してください。

要求された説明:

対角線は左から右に傾いている対角線の画像 (/ / / /) を使用してサポートされていないため、画像が希望どおりに一緒に表示されず、1 つの傾斜の左下が右上と一致することを意味します。必要な場所の右下ではなく、前の傾斜の

z-index を使用してそれらをオーバーラップさせ、相対位置または絶対位置のいずれかで修正します。

.img1 { width: 100px; position: relative; z-index: 1; }
.img2 { width: 100px; position: relative; left: -100px; z-index: 2; }
.img3 { width: 100px; position: relative; left: -200px; z-index: 3; }
.img4 { width: 100px; position: relative; left: -300px; z-index: 4; }

各画像が遠くにあるほど、移動するギャップが大きくなります。正確な距離は、画像のサイズと傾斜角によって異なります。実際には、画像自体ではなくラッピングを移動する必要があることに注意してください。そうしないと、クリックできる領域が画像上に表示されません。

于 2013-04-06T20:25:46.810 に答える