JSFiddle - React, Tailwind, and code Playground

by justindeal

HTML

<div class="container">
        <span class="wrapper">
        	<span class="placer">
            <span class="hidden">
              Silly hidden thing that extends past the other element.
            </span>
           </span>
        </span>
        <span id="hover-over-me" class="hover-over-me"
        	onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
        >Hover over me!
        </span>
      </div>

CSS

.container {
  border: 1px solid black;
  width: 400px;
  white-space: nowrap;
  overflow: hidden;
}

.wrapper {
  display: inline-block;
  max-width: 200px;
}

.placer {
  position: relative;
  display: inline-block;
  width: 200px;
}

.hidden {
  display: inline-block;
  visibility: hidden;
  background-color: gray;
}

JavaScript

const onMouseEnter = () => {
  console.log('enter');
};

const onMouseLeave = () => {
  console.log('exit');
};

const hoverNode = document.getElementById('hover-over-me');

hoverNode.onmouseenter = onMouseEnter;
hoverNode.onmouseleave = onMouseLeave;