jQuey를 기반으로 마우스가 위로 슬라이드되면 색상이 변경됩니다(전체 행 색상이 변경됨)

jQuey를 기반으로 마우스가 위로 슬라이드되면 색상이 변경됩니다(전체 행 색상이 변경됨)_jquery

WBOY

풀어 주다： 2016-05-16 15:27:22

원래의

1105명이 탐색했습니다.

많은 웹사이트가 이 효과를 가지고 있습니다. 즉, 뉴스 목록의 한 줄에 마우스를 놓으면 전체 줄의 색상이 변경됩니다. 이 기능은 CSS를 사용해도 달성할 수 있지만 많은 브라우저 버전은 CSS3를 지원하지 않습니다. 좋은 지원이 없기 때문에 현재 상황에서는 jQuery를 사용하여 이러한 종류의 기능을 구현하는 것이 좋은 선택입니다.

더 이상 고민하지 않고, 구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
ul,li{
 list-style:none;
 font-size:12px;
}
li{
 width:250px;
 height:25px;
 line-height:25px;
}
.hover{
 background-color:#666;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 jQuery.hoverPlugin={
  hover:function(selector){
   $(selector).hover(function(){
    $(this).addClass("hover");
   },function(){
    $(this).removeClass("hover");
   });
  }
 };
 $.hoverPlugin.hover(".mytest li");
});
</script>
</head>
<body>
<ul class="mytest">
 <li>1.俄罗斯爆发陨石雨，导致上千人受伤</li>
 <li>2.朝鲜成功进行核试验，半岛无核进程终结</li>
 <li>3.中国进入春运高峰期</li>
</ul>
</body>
</html>

로그인 후 복사

위 코드는 필요한 기능을 구현하지만 충분히 아름답지는 않으며 실제 필요에 따라 수정할 수 있습니다. 구현 방법도 매우 간단합니다. hover() 메서드를 사용하여 두 개의 이벤트 처리 함수를 hover 이벤트에 바인딩하여 li 요소의 배경색을 설정하는 CSS 코드를 추가하거나 삭제하는 것입니다.

위 코드도 매우 간단합니다. 궁금한 사항이 있으면 메시지를 남겨주시면 시간 맞춰 답변해 드리겠습니다. 앞으로도 스크립트하우스 홈페이지에 많은 관심 부탁드립니다.