[Solved] How to change the text inside a div by hovering over other elements

Question

You can implement this using data attribute to hold your description that you want your box to load in the h2 –

Working Example – http://codepen.io/nitishdhar/pen/CdiHa

Explanation

Write your HTML in this structure –

<div class="squares">
    <div class="square" data-content="Alpha"></div>
    <div class="square" data-content="Beta"></div>
    <div class="square" data-content="Gamma"></div>
    <h2 class="square-data-holder"></h2>
</div>

Notice I have added data-content that will hold whatever text you want it to hold. We will use this to extract the same when we have to fill it in the h2.

Use this jQuery snippet to achieve the hover effect –

$(document).ready(function() {
  $('.square').hover(
    function() {
      $('.square-data-holder').text($(this).data('content')).fadeIn('slow');
    }, function() {
      $('.square-data-holder').fadeOut('slow');
   });
});

hover() takes two handlers to handle hover in & hover out – $( selector ).hover( handlerIn, handlerOut ), Refer – http://api.jquery.com/hover/

So on hover of any of the div’s with class square, we get hold of the content of the div that was hovered using –

$(this).data('content')

And we append the same to the h2 element. On hover out, we just make h2 empty.

This should do what you want.

Accepted Answer