更改图像onmouseover [英] Change image onmouseover

问题描述

 < p>< p>在鼠标悬停上更改图像的正确方法是什么（带/不带jQuery）？ a href =＃id =name> 
  gt ; 
< / a> 
  

好的，这是可行的，但是如何在 mouseout ？

如果可能的话，我想在没有document.ready函数的情况下内联这个东西。

解决方案

尝试类似以下内容：

p>

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

jQuery：

  $（'＃imageid'）。hover（function（）{
 $（this）.attr（'src'，'/ folder / image2.jpg'）; 
}，function（）{
 $（this）.attr（'src'，'/folder/image1.jpg'）; 
}）; 
  

• DEMO

  
  

$ b 编辑： （在发布OP HTML之后）

HTML： b $ b

 < a href =＃id =name> 
< img title =Hellosrc =/ ico / view.png/> 
< / a> 
  

jQuery：

  $（'＃name img'）。hover（function（）{
 $（this）.attr（'src'，'/ico/view1.png' ）; 
}，function（）{
 $（this）.attr（'src'，'/ico/view.png'）; 
}）; 
  

• DEMO

  
  

What's the correct way to change an image on mouseover and back on mouseout (with/without jQuery)?

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

Ok, this is working, but how to change back to the original image after mouseout?

If it is possible, I want to do this thing inline, without document.ready function.

解决方案

Try something like this:

HTML:

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

jQuery: ​

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

• DEMO

EDIT: (After OP HTML posted)

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');
});

• DEMO

这篇关于更改图像onmouseover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！