刚学习jQuery并使用它来更改鼠标悬停事件触发的按钮上的背景图像。所有控制台输出都在正确的时间触发,但我的图像永远不会改变。没有错误被抛出。我做错了什么?
在<head>
元素中,我有这个预加载脚本:
function preloader() {
if (document.images) {
console.log("preloading images");
contact_green = new Image();
contact_green.src = "http://www.xxxx.com/images/contact_green.png";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
这似乎工作得很好,从某种意义上说,我得到输出“预加载图像”。但是,不确定它是否具有正确的范围。
然后,在<body>
元素中,我定义了这个按钮:
<td>
<button id='contact' class='CXIII' onclick="btnContact()">
<img id="logo" src="images/contact_blue.png">
</button>
</td>
最后,我有一个脚本应该在鼠标悬停事件时更改此按钮上的图像:
<script>
function showHover(img) {
console.log("show hover");
if (img) img.src = contact_green;;
}
$("#contact").hover(
function () {
console.log("mouse in");
showHover(this);
},
function () {
console.log("mouse out");
}
);
</script>
我得到了控制台输出,但图像没有改变。也没有抛出任何错误。
答案 0 :(得分:0)
您正在设置对象,而不是图像的来源
img.src = contact_green;;
需要
img.src = contact_green.src;
你没有设置图像,而是按钮。
showHover(this);
需要
showHover($(this).find("img")[0]);
因为你正在使用jQuery
$(window).load(preloader);