JavaScript MouseOver图像
JavaScript MouseOver图像
提问于 2014-11-03 02:24:53
我试图改变图片使用鼠标悬停，但它似乎不起作用？有人能帮上忙吗？以下是我的代码
<img id="myImg" src="Nov1.jpg" alt="November" style="width:452px;height:127px">
<script>
$('#myImg').hover(function() {
$(this).attr('src', '/folder/nov2014.jpg');
}, function() {
$(this).attr('src', '/folder/Nov1.jpg');
});
</script>回答 2
Stack Overflow用户
发布于 2014-11-03 02:51:40
可能有两个原因会造成这样的问题。
- 在使用之前，请查看是否包含了jQuery库。
- 您必须将代码放入$(document).ready(function(){ //此处您的代码转到了});
试试这种方式，
HTML :
<img id="myImg" src="http://www.allgraphics123.com/ag/01/14142/14142.gif" />jQuery :
$(document).ready(function(){
$('#myImg').hover(function() {
$(this).attr('src', 'http://thumb7.shutterstock.com/display_pic_with_logo/265489/120305665/stock-vector-cartoon-parrot-vector-clip-art-illustration-with-simple-gradients-all-in-a-single-layer-120305665.jpg');
}, function() {
$(this).attr('src', 'http://www.allgraphics123.com/ag/01/14142/14142.gif');
});
});为什么你的代码不能工作？
在操作任何DOM元素之前，必须先加载页面。所以一个问题就出现了，
我如何知道页面是否已经加载！
这是来自jQuery的帮助$(document).ready()；。当DOM元素准备就绪时，它让javaScript执行它所包含的代码。因此，作为开发人员，您不必担心DOM是否已加载。
这就是为什么您要在DOM元素#myImg可用之前对其进行操作的原因。并且您的javaScript/jQuery代码无法找到您所请求的内容。
Stack Overflow用户
发布于 2014-11-03 02:33:13
尝试：
<img id="myImg" src="Nov1.jpg" alt="November" style="width:452px;height:127px">
<script>
$("#myImg")
.mouseover(function() {
$(this).attr("src", "/folder/nov2014.jpg");
})
.mouseout(function() {
$(this).attr("src", "/folder/Nov1.jpg");
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26702766
复制相关文章
相似问题
腾讯云开发者
