將鼠標懸停在頁腳中的圖像和文本出現在主

我的頁腳div中有4個按鈕，當用戶將鼠標懸停在某個按鈕上時，某些文本需要顯示在頁腳上方的mainsection 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>

來源

2012-10-20 New2WebDevelopment

我用這個代碼，以使事情工作。

 $(".button").hover(function(){ 
    $('.buttonContent').show(); 
},function(){ 
    $('.buttonContent').hide(); 
});

來源

2012-10-20 22:51:08 New2WebDevelopment

你可以只綁定了一些處理程序爲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-20 14:28:16 Sampson

感謝您回答我的問題，但是當您說「將主區域的文本設置爲按鈕上的alt值」時，我該怎麼做？對不起，我對java不太好。 – New2WebDevelopment

我與您分享了上述的代碼。 – Sampson

將鼠標懸停在頁腳中的圖像和文本出現在主

回答

相關問題