3

マウスをテキストの上に移動すると、マウスがテキストから離れるまで、ページの別の部分の画像が別の画像に変わるという効果を作成しようとしています。これを行う簡単な方法を知っている人はいますか？CSS のみを使用したいのですが、必要に応じて js を使用します。

4

2 に答える 2

2

マウスとさまざまな要素との間のこの種の対話は、CSS だけで行うべきではありません。Javascript を使用する必要があります。次の例では、jQuery フレームワーク(生の JavaScript の単なるアドオン) を使用して、段落の上にカーソルを置いたときに画像のソースを変更します。

$("p.magicParagraph").hover(
  function() { $("img.magicImage").attr("src", "image2.jpg"); },
  function() { $("img.magicImage").attr("src", "image1.jpg"); }
);

このコードは、className "magicParagraph" を持つ任意の段落のホバリングに一連のイベントをバインドします。最初の関数は、段落の上に移動したときに実行されることであり、2 番目の関数は、段落の外に移動したときに実行されることです。これは、次のマークアップで機能します。

<p class="magicParagraph">Hover over me to change the image!</p>
<p><img src="image1.jpg" class="magicImage" /></p>
于 2009-12-14T16:17:02.053 に答える
0

CSS だけでさまざまな要素間の相互作用を取得することは可能ですが、簡単ではありません。私が見る限り、ドキュメント構造にいくつかの制約が課せられます (おそらく、私よりも CSS セレクターの知識が豊富な人は、これを回避する方法を見つけることができます)。これは完全なソリューションではなく、概念実証と考えてください。これには CSS レベル 2 のサポートが必要であることに注意してください。

<html>
    <head>
        <style>
img { float: right }
p.magicParagraph + img { display: none }
p.magicParagraph:hover + img { display: block }
p.magicParagraph + img + img { display: block }
p.magicParagraph:hover + img + img { display: none }
        </style>
    </head>
    <body>
        <p class="magicParagraph">Hover over me to change the image!</p>
        <img src="image1.png" />
        <img src="image2.png" />
    </body>
</html>
于 2009-12-14T16:52:51.243 に答える