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

您可以为mouseenterandmouseleave事件绑定一些处理程序。输入区域时，将主要区域的文本设置为按钮上的 alt 值。当您离开该区域时，请擦除主要区域的文本：

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

小提琴：http: //jsfiddle.net/ueanr/1/

Answer 2

我使用此代码使事情正常进行。

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