2

我试图在鼠标悬停时隐藏特定图像并显示另一个图像。鼠标移出时将完成相反的操作。下面是我写的代码，

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

但是当我运行应用程序时它不起作用。谁能指出其中出了什么问题？
非常感谢！

4

4 回答 4

5

如果你使用 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();">

这使用jQuery 中的方法show()和hide()方法。

否则使用以下内容：

<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');" >
于 2012-06-27T00:17:25.560 回答
1

你可以做这样的事情，使用悬停和隐藏/显示：

$(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();
    });
});
于 2012-06-27T00:19:19.957 回答
1

我实际上完全用 CSS 来做这件事。尝试以下操作：

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

JSFiddle 概念证明：http: //jsfiddle.net/86DJu/

于 2012-06-27T00:17:00.287 回答
0

一点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")
}

http://jsfiddle.net/2wHfN/2/

于 2012-06-27T00:19:17.540 回答