JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<div class="parent" id="over">
親（マウスオーバー）
  <div class="child">子供</div>
</div>

<div class="parent" id="enter">
親（マウスエンター）
  <div class="child">子供</div>
</div>

SCSS

* {
  box-sizing: border-box;
}
.parent {
  padding: 20px;
  background-color: purple;
  width: 200px;
  margin-bottom: 40px;
}
.child {
  background-color: yellow;
}

JavaScript

$('#over').on('mouseover', function(){
	console.log('マウスオーバー');
});

$('#enter').on('mouseenter', function(){
	console.log('マウスエンター');
});