javascript - 将鼠标悬停在页脚中的图像上，文本将显示在主窗口中

Question

我的页脚 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>

Answer 1

您可以为 mouseenter 和 mouseleave 事件绑定(bind)一些处理程序。当您进入该区域时，将主区域的文本设置为按钮上的 alt 值。当您离开该区域时，删除主区域的文本:

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

fiddle :http://jsfiddle.net/ueanr/1/