search

Home >Web Front-end >JS Tutorial >Based on jQuey, the color changes when the mouse slides over it (the entire row changes color)_jquery

Based on jQuey, the color changes when the mouse slides over it (the entire row changes color)_jquery

WBOY
WBOYOriginal
2016-05-16 15:27:221140browse

Many websites have this effect, that is, when the mouse is placed on a line of the news list, the entire line will change color. Although this function can also be achieved using CSS, many browser versions do not support CSS3. There is no good support, so in the current situation, using jQuery to achieve this kind of functionality is a good choice.

Without further ado, I will just post the jquery code for you. The specific code is as follows: 

<!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>

The above code implements the required functions, although it is not beautiful enough and can be modified according to actual needs. The implementation method is also very simple, which is to use the hover() method to bind two event handling functions to the hover event to add or delete the CSS code that sets the background color of the li element.

The above code is also very simple. If you have any questions, please leave me a message. I will reply to you in time. At the same time, thank you for your continued support of the Script House website.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Implementation of page jump and loading external pages in jQuery mobile web development_jqueryNext article：Implementation of page jump and loading external pages in jQuery mobile web development_jquery

Related articles

See more