jQuery a dynamic class

adds CSS to an unknown class on hover

by mr_pickle

HTML

<body>
  <div class="F_01.1">
    test1
  </div>
  <div class="F_012">
    test2
  </div>
  <div class="F_023">
    test3
  </div>
  <div class="F_02.4">
    test4
  </div>

  <!-- If there is a point/period in className the jQuery function will not work on this element. So either make shure there is no point/period there or edit the jQuery function -->

JavaScript

$(document).on('mouseover', 'div', function(e) {
  var className = $(e.target).attr('class');
  $("." + className).css("background-color", ranCol());
}).on('mouseout', 'div', function(e) {
  var className = $(e.target).attr('class');
  $("." + className).css("background-color", "#F3F5F6");
});

var ranCol = () => "hsl(" + 360 * Math.random() + ',' +
  (25 + 70 * Math.random()) + '%,' +
  (75 + 10 * Math.random()) + '%)'; //read https://stackoverflow.com/a/43195379/8937563 for more information