[jQuery] mouseenter , mouseleave 마우스 호버 효과 - 마우스 엔터

마우스 호버효과처럼 보이지만

조금 다른 mouseenter/mouseleave 효과 입니다.

마우스가 특정 요소 위에 들어오거나 벗어날 때만 반응하므로

드롭다운 버튼이나 툴팁 등의 UI에서 주로 사용됩니다.

 

주로 사용되는 부분 

드롭다운 버튼 

 

 

인풋 박스 

 

 

 

HTML 

<div id="Lang">
  <div class="lang_list">
    <a href="javascript:void(0);">KR</a>
    <ul class="list">
      <li class="current"><a href="#">KR</a></li>
      <li><a href="#">EN</a></li>
      <li><a href="#">CN</a></li>
    </ul>
  </div>
</div>

CSS

#Lang > * {
  display: inline-block;
  vertical-align: middle;
}
#Lang .lang_list {
  position: relative;
  width: 50px;
  text-align: center;
  font-size: 14px;
}
#Lang .lang_list > a {
  display: block;
  width: 100%;
  height: 40px;
  line-height:2.5;
  font-weight: 700;
  color: #666666;
  text-decoration: none;
}
#Lang .lang_list .list {
  display: none;
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  padding: 10px 0;
  font-weight: 700;
  border: 1px solid #989898;
  border-radius: 8px;
  margin: 0;
  background-color: #fff;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
#Lang .lang_list .list li a {
  line-height: 1.5;
  color: #666666;
  text-decoration: none;
}
#Lang .lang_list .list li a:hover {
  font-weight: 700;
  color: #00a3f1;
}
#Lang .lang_list .list li.current a {
  font-weight: 700;
  color: #00a3f1;
}
#Lang .lang_list.open .list {
  display: block;
}

jQuery

$("#Lang").find(".lang_list").on("mouseenter",function(){
  $(this).addClass('open');
});
$("#Lang").find(".lang_list").on("mouseleave",function(){
  $(this).removeClass('open');
});

mouseenter

• 마우스가 요소 위로 들어올 때 발생.
• 자식 요소에서는 발생하지 않음 (버블링 없음).
• 요소 안에서 마우스가 움직여도 한 번만 발생.

mouseleave

• 마우스가 요소를 벗어날 때 발생.
• 자식 요소에서는 발생하지 않음 (버블링 없음).
• 요소 밖에서 마우스가 움직여도 한 번만 발생.

 

*마우스를 올려 보세요! 😀