Javascript 在div中的鼠标悬停操作中隐藏和显示图像

我试图在鼠标上方隐藏一个特定的图像并显示另一个图像。当鼠标移出时，将执行此操作。下面是我写的代码

<div id="console" onmouseover="$(this).find('#offer_image').css({display: none});$(this).find('#offer_image_selected').css({visibility: visible});"
     onmouseout="$(this).find('#offer_image').css({visibility: visible});$(this).find('#offer_image_selected').css({display: none});" >

---

但当我运行应用程序时，它不起作用。有人能指出它出了什么问题吗<非常感谢

实际上，我完全可以用CSS来实现这一点。请尝试以下操作：

#console #offer_image,#console:hover #offer_image_selected{display:block;}
#console:hover #offer_image,#console #offer_image_selected{display:none;}

<div id="console"
     onmouseover="$(this).find('#offer_image').css('display', 'none'); $(this).find('#offer_image_selected').css('display', 'block');"
     onmouseout="$(this).find('#offer_image').css('display', 'block'); $(this).find('#offer_image_selected').css('display', 'none');" >

---

概念证明JSFIDLE:

如果您使用jQuery，请尝试

<div id="console"
     onmouseover="$(this).find('#offer_image').hide(); $(this).find('#offer_image_selected').show();"
     onmouseout="$(this).find('#offer_image').show(); $(this).find('#offer_image_selected').hide();">

---

来一点css3怎么样？从以下内容开始：

#console {
background-image: url("first-image.jpg")
-moz-transition: all 0.5s; 
-webkit-transition: all 0.5s; 
-o-transition: all 0.5s; 
transition: all 0.5s;
}

#console:hover {
background-image: url("second-image.jpg")
}

---

您可以使用悬停和隐藏/显示来执行类似操作：

$(document).ready(function()
{
    $('#console').hover(function()
    {
        $(this).find('#offer_image').hide();
        $(this).find('#offer_image_selected').show();
    }, function()
    {
        $(this).find('#offer_image').show();
        $(this).find('#offer_image_selected').hide();
    });
});

---

@Connor为什么要在以前的标准中完全可能的情况下使用css3？@Connor你的意思是在onmouseover和onmouseout中加载不同的CSS？是的，我正在写一个答案…@TNC是的，我不想争辩。。。这只是另一个解决方案。