JSFiddle - React, Tailwind, and code Playground

HTML

<div id="images">
  <div class="image">
    <p>Hover for cat 1</p>
  </div>
  <div class="image">
    <p>Hover for cat 2</p>
  </div>
  <div class="image">
    <p>Hover for cat 3</p>
  </div>
  <div class="image">
    <p>Hover for cat 4</p>
  </div>
  <div class="image">
    <p>Hover for cat 5</p>
  </div>
  <div class="image">
    <p>Hover for cat 6</p>
  </div>
  <div class="default">
    <p>Default Text</p>
  </div>
</div>
<div id="cats">
  <p>Category 1 text</p>
  <p>Category 2 text</p>
  <p>Category 3 text</p>
  <p>Category 4 text</p>
  <p>Category 5 text</p>
  <p>Category 6 text</p>
</div>

CSS

* {
    font-size: 20px;
    text-align: center;
}


.image {
    float: left;
    width: 150px;
    border: thin solid #CCC;
    margin-bottom: 20px;
}

#cats, .default { 
    width: 450px;
}

#cats p {
    display: none;   
}

JavaScript

$(document).ready(function() {

    $('#images').delegate('div.image', 'mouseenter mouseleave', function(e) {
       $('.default').toggle(e.type === 'mouseleave');
       $('#cats p').eq($(this).index()).toggle(e.type !== 'mouseleave');
    });
});