1

フッター div に 4 つのボタンがあります。ユーザーがボタンにカーソルを合わせると、フッターの上にあるメインセクション div にテキストを表示する必要があります。テキストでは、各ボタンの機能を簡単に説明する必要があります。

これを達成するにはどうすればよいですか？

ありがとうございました！

これが私のコードの例です

<div id='header'></div>
<div id='mainsection'>

<!----WHERE TEXT NEEDS TO APPEAR---->

</div>
<div id='footer'>
    <ul id='buttonHolder'>

       <li class="buttons"><img src="Images/Buttons/Dj-button.png" alt="DJ button" width="135" height="88"></li>
            <li class="buttons"><img src="Images/Buttons/VHS-tape---button.png" alt="VHS tape" width="128" height="88"></li>
            <li class="buttons"><img src="Images/Buttons/Camera---button.png" alt="Camera" width="130" height="88"></li>
            <li class="buttons"><img src="Images/Buttons/Film-strip---button.png" alt="Film strip" width="104" height="88"></li>

    </ul>

</div>
4

2 に答える 2

1

mouseenterおよびmouseleaveイベントのハンドラーをいくつかバインドするだけです。リージョンに入ったら、メイン エリアのテキストをボタンの alt 値に設定します。リージョンを離れるときは、メイン エリアのテキストを消去します。

var main = $("#mainsection");
$(".buttons img").on({
    mouseenter: function(){ main.text( this.alt ) },
    mouseleave: function(){ main.text( '' ) }
});

フィドル: http://jsfiddle.net/ueanr/1/

于 2012-10-20T14:28:16.413 に答える
0

私は物事を機能させるためにこのコードを使用しました。

     $(".button").hover(function(){
    $('.buttonContent').show();
},function(){
    $('.buttonContent').hide();
});
于 2012-10-20T22:51:08.117 に答える