테스트 사이트 - 개발 중인 베타 버전입니다

.hover (handlerIn, handlerOut)

· 8년 전 · 1409

.hover (handlerIn, handlerOut)

설명 : 일치하는 요소에 두 개의 핸들러를 바인딩하여 마우스 포인터가 요소에 들어갔을 때 실행됩니다.

이 .hover()메서드는 양쪽 mouseenter및 mouseleave이벤트에 대한 처리기를 바인딩 합니다. 마우스를 요소 내에 사용하는 동안 요소에 비헤이비어를 적용하는 데 사용할 수 있습니다.

전화 $( selector ).hover( handlerIn, handlerOut )는 다음과 같이 단축됩니다.

1
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
에 대한 토론을 참조 .mouseenter()하고 .mouseleave()자세한 내용을.

예 :
특수 스타일을 추가하여 위에 놓은 항목을 나열하려면 다음을 시도하십시오.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover demo</title>
  <style>
  ul {
    margin-left: 20px;
    color: blue;
  }
  li {
    cursor: default;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li class="fade">Chips</li>
  <li class="fade">Socks</li>
</ul>
 
<script>
$( "li" ).hover(
  function() {
    $( this ).append( $( "<span> ***</span>" ) );
  }, function() {
    $( this ).find( "span:last" ).remove();
  }
);
 
$( "li.fade" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
});
</script>
 
</body>
</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
17443
17442
17441
17440
17438
17436
17435
17433
17432
17430
17426
17416
17413
17401
17391
17379
17375
17374
17362
17350
17348
17341
17339
17335
17334
17333
17332
17331
17330
17329