JSFiddle - React, Tailwind, and code Playground

by jwpg018241

HTML

<body>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="squares">
    <div class="square genre-a" data-content="asdfasdfasdfasdfasdfqwefqwefqwfeqwefqwefwqasdfasdfasdfasdfasdfasdfsadfasasdfasdfasdfqwefsdafsdfsdfqwdqwddfqw"></div>
    <div class="square genre-b" data-content="as123123312312dfasdfasdfasdfasdfqwefqwefqwfeqwefqwefwqasdfasdfasdfasdfasdfasdfsadfasasdfasdfasdfqwefsdafsdfsdfqwdqwddfqw"></div>
    <div class="square genre-c" data-content="12312413qf1cqscasasdfasdfasdfasdfasdfqwefqwefqwfeqwefqwefwqasdfasdfasdfasdfasdfasdfsadfasasdfasdfasdfqwefsdafsdfsdfqwdqwddfqwa"></div>
</div>   

  



<div class="abb">
   <h2 class="square-data-holder">asdfasdfasdfasdfasdfqwefqwefqwfeqwefqwefwqasdfasdfasdfasdfasdfasdfsadfasasdfasdfasdfqwefsdafsdfsdfqwdqwddfqwefef</h2>
</div>
</body>

CSS

body {
  width: 100px;
}
.square {
  display: block;
  padding: 100px;
  background-color: #000;
  margin: 20px;
  float: left;
}
.square.in-active {
  opacity: 1;
}

.square.active {
  opacity: 1;
}




.abb {
  width: 100%;
  height:10px
}
.square-data-holder {
  content: "aaaaaaaaaaasadcscsaccas"
}

JavaScript

$(document).ready(function() {
   $('.square').hover(
    function() {
      if($(this).hasClass('in-active')) {
        return false;
      }
      $('.square-data-holder').text($(this).data('content'));
    }, function() {
      $('.square-data-holder').text('aaaaaaa');
      
    });

});