14

マウスオーバーで画像を変更し、マウスアウトで元に戻す正しい方法は何ですか(jQueryの有無にかかわらず)?

<a href="#" id="name">
    <img title="Hello" src="/ico/view.png" onmouseover="$(this).attr('src','/ico/view.hover.png')" />
</a>

わかりました、これは機能していますが、後に元の画像に戻すにはどうすればよいmouseoutですか?

可能であれば、document.ready 関数を使用せずにインラインで実行したいと考えています。

4

8 に答える 8

47

onmouseover と onmouseout で画像を変更するためのネイティブ JavaScript インライン コードを次に示します。

<a href="#" id="name">
    <img title="Hello" src="/ico/view.png" onmouseover="this.src='/ico/view.hover.png'" onmouseout="this.src='/ico/view.png'" />
</a>
于 2012-10-11T17:25:02.980 に答える
15

次のようなことを試してください：

HTML :

<img src='/folder/image1.jpg' id='imageid'/>

jQuery: </p> 

$('#imageid').hover(function() {
  $(this).attr('src', '/folder/image2.jpg');
}, function() {
  $(this).attr('src', '/folder/image1.jpg');
});

編集： （OP HTMLが投稿された後）

HTML:

<a href="#" id="name">
    <img title="Hello" src="/ico/view.png"/>
</a>

jQuery:

$('#name img').hover(function() {
  $(this).attr('src', '/ico/view1.png');
}, function() {
  $(this).attr('src', '/ico/view.png');
});
于 2012-05-22T19:54:27.067 に答える
4

/ の前に 1 つか 2 つのドットを付けてください

('src','./ico/view.hover.png')"
于 2012-05-22T19:49:45.157 に答える
3

次に例を示します。

HTML コード:

<img id="myImg" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"/>

JavaScript コード:

$(document).ready(function() {
    $( "#myImg" ).mouseover(function(){
        $(this).attr("src", "http://www.jqueryui.com/images/logo.gif");
    });

    $( "#myImg" ).mouseout(function(){
        $(this).attr("src", "http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif");
    });
});

編集：申し訳ありませんが、あなたのコードは少し奇妙でした。今、私はあなたが何をしていたかを理解しました。;) もちろん、hover メソッドの方が優れています。

于 2012-05-22T19:53:31.623 に答える
2

CSSを使用するだけでそれを行うことができます。

内に別のタグを配置する必要があります。<a>その後、のCSSbackground-image属性を変更できますa:hover。

すなわち

HTML：

<a href="#" id="name">
  <span>&nbsp;</span> 
</a>

CSS：

a#name span{
  background-image:url(image/path);
}

a#name:hover span{
  background-image:url(another/image/path);
}
于 2012-05-22T20:16:07.437 に答える
2 
<a href="" onMouseOver="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/ask-icon.png';" onMouseOut="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png';">
<img src="http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png" name="MyImage">

デモ http://jsfiddle.net/W6zs5/

于 2014-06-27T01:56:55.337 に答える
2

jQueryには.mouseover()と.html(). マウスオーバー イベントを関数に関連付けることができます。

  1. 現在の画像を非表示にします。
  2. 現在の html 画像を切り替えたい画像に置き換えます。
  3. 非表示にした div を表示します。

カーソルがdivの上にぶら下がっていないことを示すmouseoverイベントを取得すると、同じことができます。

于 2012-05-22T19:51:02.843 に答える
1

誰かがこれと同じように答えたことは知っていますが、私は自分で調査を行い、その答えを確認するために以前にこれを書きました. だから：タグimgに「ラップ」せずに、インラインJavaScriptで単純なものを探していました（したがって、の代わりに、を使用しました）adocument.MyImagethis.src

<img 
onMouseOver="this.src='ico/view.hover.png';" 
onMouseOut="this.src='ico/view.png';" 
src="ico/view.png" alt="hover effect" />

現在更新されているすべてのブラウザーで動作します。IE 11 (IE5 以降の IE の開発者ツールでもテストしました)、Chrome、Firefox、Opera、Edge。

于 2015-10-26T23:21:53.780 に答える