<div class="outer">
  <div class="inner"></div>
</div>
body {
  width: 500px;
  margin: 30px auto;
}
.outer {
  width: 200px;
  height: 200px;
  background: pink;
  padding: 50px;
  margin: 10px;
}

.inner {
  width: 100%;
  height: 100%;
  background: greenyellow;
}
$('.outer')
  .mouseover(function(){
  $('body').append('<p>마우스오버가 발생했습니다.</p>')
})
  .mouseenter(function(){
  $('body').append('<p>마우스엔터,마우스엔터</p>')
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js