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

jQueryイメージを動(dòng)的に変更します

<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

に関するよくある質(zhì)問(wèn)

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

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

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

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

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

}

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

jQuery？

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

$（document）.ready（function（）{

div1 "）。hover（function（）{

$（"＃div2 "） $（ "＃div2"）。find（ "img"）。マウスを「div1」から遠(yuǎn)ざけると、「div2」の畫像は「image1.jpg」に戻り??ます。

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

$（document）.ready（function（）{
> $（ "li"）。hover（function（）{
> $（this）.children（ "img"） $（this）.children（ "img"）。マウスをリスト項(xiàng)目から遠(yuǎn)ざけると、子の畫像が「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はホバーで畫像を変更しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。