Question

I have 4 buttons in my footer div, when a user hovers over a button some text needs to be displayed in the mainsection div which is above the footer. The text needs to give a brief explanation of each button’s features.

How do I go about achieving this?

Thank you!

here is some example of my code

<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

I used this code to make things work.

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