JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image" data-id="#cat1">
  <p>Hover for cat 1</p>
</div>
<div class="image" data-id="#cat2">
  <p>Hover for cat 2</p>
</div>
<div class="image" data-id="#cat3">
  <p>Hover for cat 3</p>
</div>
<div class="default">
  <p>Default Text</p>
</div>
<div id="cats">
  <p id="cat1">Category 1 text</p>
  <p id="cat2">Category 2 text</p>
  <p id="cat3">Category 3 text</p>
</div>

CSS

#cats p
{
    display: none;
}
* {
    font-size: 20px;
    text-align: center;
}
.image {
    float: left;
    width: 150px;
    border: thin solid #CCC;
    margin-bottom: 20px;
}
#cats, .default { 
    width: 450px;
}

JavaScript

$(".image").hover(function() {
    $(".default").toggle();
    $($(this).data('id')).toggle()    
});