JSFiddle - React, Tailwind, and code Playground

by takumi091111

HTML

<div id="trigger">AAA</div>
<div class="a-arrow" data-align="up" data-invert="false"></div>

SCSS

.a-arrow {
  content: "";
  position: relative;
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  transition: transform 0.3s;
  &::before, &::after {
    content: "";
    position: absolute;
    background-color: #333;
    border-radius: 3px;
  }
  &::before {
    width: 7px;
    height: 2px;
    margin-left: -1px;
    transform: rotate(45deg);
  }
  &::after {
    position: absolute;
    left: 4px;
    width: 7px;
    height: 2px;
    margin-left: -1px;
    transform: rotate(-45deg);
  }
  &[data-align="up"] {
    transform: rotate(180deg);
  }
  &[data-align="up"][data-invert="true"] {
    transform: rotate(0deg);
  }
  &[data-align="down"] {
    transform: rotate(0deg);
  }
  &[data-align="down"][data-invert="true"] {
    transform: rotate(180deg);
  }
  &[data-align="left"] {
    transform: rotate(90deg);
  }
  &[data-align="left"][data-invert="true"] {
    transform: rotate(-90deg);
  }
  &[data-align="right"] {
    transform: rotate(-90deg);
  }
  &[data-align="right"][data-invert="true"] {
    transform: rotate(90deg);
  }
}

JavaScript

const trigger = document.getElementById('trigger')
const arrow = document.getElementsByClassName('a-arrow')[0]
const handleEvent = () => {
	console.log('test')
	const isInvert = arrow.getAttribute('data-invert') === 'true'
	arrow.setAttribute('data-invert', !isInvert)
}
trigger.addEventListener('mouseenter', handleEvent)
trigger.addEventListener('mouseleave', handleEvent)