JSFiddle - React, Tailwind, and code Playground

Set hovering state manually - Fliplet Widgets

by Hugo Carneiro

HTML

<div class="fl-widget">
  <div class="fl-widget hello">
    Hello
    <div class="widget-overlay"></div>
  </div>
  <div class="widget-overlay"></div>
</div>

CSS

.fl-widget {
  position: relative;
  height: 200px;
}

.widget-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: orange;
  opacity: 0.5;
  display: none;
}

.fl-widget.hovering .widget-overlay {
  display: block;
}

JavaScript

/* $(document).on('mouseover', function(event) {
  var $element = $(event.target);
  $('.fl-widget').removeClass('hovering');

  if ($element.is('.fl-widget')) {
    $element.addClass('hovering');
    return;
  }

  if ($element.parents('.fl-widget').length) {
    var $parents = $element.parents('.fl-widget');
    var $parent = $( $parents.get(0));
    $parent.addClass('hovering');
    return;
  }
}); */

function fireCustomEvent(eventName, element, data) {
  'use strict';
  var event;
  data = data || {};
  if (document.createEvent) {
    event = document.createEvent("HTMLEvents");
    event.initEvent(eventName, true, true);
  } else {
    event = document.createEventObject();
    event.eventType = eventName;
  }

  event.eventName = eventName;
  event = $.extend(event, data);

  if (document.createEvent) {
    element.dispatchEvent(event);
  } else {
    element.fireEvent("on" + event.eventType, event);
  }
}

$(document).on('dragstart', '.hello', function() {
	console.log('HERE');
});

var someDomObject = $('.hello').get(0);
fireCustomEvent('dragstart', someDomObject);