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

これはshow()、hide()jQueryのメソッドを使用します。

それ以外の場合は、以下を使用してください。

<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

私は実際にこれを完全に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 に答える
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 に答える
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 に答える