jQuey를 기반으로 마우스가 위로 슬라이드되면 색상이 변경됩니다(전체 행 색상이 변경됨)_jquery
- WBOY원래의
- 2016-05-16 15:27:221151검색
많은 웹사이트가 이 효과를 가지고 있습니다. 즉, 뉴스 목록의 한 줄에 마우스를 놓으면 전체 줄의 색상이 변경됩니다. 이 기능은 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 코드를 추가하거나 삭제하는 것입니다.
위 코드도 매우 간단합니다. 궁금한 사항이 있으면 메시지를 남겨주시면 시간 맞춰 답변해 드리겠습니다. 앞으로도 스크립트하우스 홈페이지에 많은 관심 부탁드립니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.