Question

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

Answer 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/

Answer 2

我使用此代码使事情有效。

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

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

2 个答案: