JQueryはホバーで画像を変更します

jQueryの本当にクールな機能は、画面の特定の領域にマウスを移動すると、画像が変更されるなど、画像を動的に変更する機能です。 あなたがそれを行う方法：あなたは画像SRCプロパティを参照し、2つの関数を介してそれを変更します。最初の関数は画像を変更し、2番目の関数はそれをバックします。次に、HTMLでは、マウスが機能をトリガーする領域にイベントを追加します（これらのトリガーもJavaScriptに追加できることに注意してください）。そのように簡単です。ライブデモを参照してください

jQueryイメージを動的に変更します

<span>//this code sits outside the (document).ready function
</span>
<span>function twittereyesopen() {
</span>   <span>//alert("open");
</span>   <span>var name_element = $('#twitter-image');
</span>   name_element<span>.src = "/images/page-images/twitter-eyes-open.jpg";
</span><span>}
</span>
<span>function twittereyesclosed() {
</span>   <span>//alert("closed");
</span>   <span>var name_element = $('#twitter-image');
</span>   name_element<span>.src = "/images/page-images/twitter-eyes-closed.jpg";
</span><span>}</span>

以下はHTMLに入ります。

jQuery Image Hover Effects

に関するよくある質問

jqueryを使用してホバー上の画像を変更するにはどうすればよいですか？

jqueryを使用してホバー上の画像を変更するには、Hover（）メソッドを使用する必要があります。このメソッドは、選択した要素をマウスポインターがホールするときに実行する2つの機能を指定します。最初の関数は、マウスがHTML要素に入るときに実行され、2番目の関数はマウスがHTML要素を離れるときに実行されます。簡単な例を次に示します。

$（document）.ready（function（）{
$（ "img"）。hover（function（）{
> $（this）.attr（ "src"、 "image2.jpg"）;
}、function（）{}）;
この例では、画像の上にホバリングすると、「image2.jpg」に変更されます。マウスを移動すると、「image1.jpg」に戻り​​ます。

jqueryの代わりにCSSを使用して、ホバー上の画像を変更できますか？これは、Hover Pseudo-Classを使用して実行できます。例は次のとおりです。

img：hover { content：url（ 'image2.jpg'）;

}

この例では、画像の上にホバーすると、「image2.jpg」に変更されます。ただし、この方法では、マウスが画像を離れたときに画像を変更する方法は提供されません。その機能については、JavaScriptまたはjQueryを使用する必要があります。

jQuery？

を使用して別のDivのイメージを変更するにはどうすればよいですか？ find（）メソッドは、選択した要素の子孫要素を返します。例は次のとおりです。

$（document）.ready（function（）{

div1 "）。hover（function（）{

$（"＃div2 "） $（ "＃div2"）。find（ "img"）。マウスを「div1」から遠ざけると、「div2」の画像は「image1.jpg」に戻り​​ます。

jQueryを使用してリスト項目のHoverの画像を変更するにはどうすればよいですか？

$（document）.ready（function（）{
> $（ "li"）。hover（function（）{
> $（this）.children（ "img"） $（this）.children（ "img"）。マウスをリスト項目から遠ざけると、子の画像が「Image1.jpg」に戻り​​ます。これらの方法は、選択された要素の不透明度を徐々に非表示から表示（フェデイン）、および表示から隠し（フェードアウト）に変更します。例は次のとおりです。

$（document）.ready（function（）{
> $（ "img"）。hover（function（）{
> $（this）.fadeout（500、function（）{
$（this）.attr（ "src"、 "、" image2.jpg）。 function（）{
$（this）.fadeout（500、function（）{
$（this）.attr（ "src"、 "image1.jpg"）。 「image2.jpg」、そしてフェードインします。マウスを離すと、フェードアウトし、「image1.jpg」に戻り​​、フェードインします。

以上がJQueryはホバーで画像を変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。