JSFiddle - React, Tailwind, and code Playground

by Trevor Power

HTML

<section>
  <span>one</span>
  <a>two</a>
  <span>three</span>
  <a class="js-removed">four</a>
  <a>five</a>
</section>

SCSS

/* styles for plugin */

@mixin strike-through {
  text-decoration: line-through;
  &.click-hover {
    text-decoration: line-through underline;
  }
}

.click-hover {
  text-decoration: underline;
}

// usage
a {
  color: blue;
  &.js-removed {
    @include strike-through;
  }
}

JavaScript

// re-usable plugin
$.fn.fancyClick = function(selector, action) {
	const toggle = e => $(e.target).toggleClass('click-hover');
  this
    .on('mouseenter', selector, toggle)
    .on('click', selector, e => action(e.target))
    .on('mouseleave', selector, toggle);
}




// useage
$('section').fancyClick('a', e => console.log(e.innerText))