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

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

WBOY

Release： 2016-05-16 15:27:22

Original

1181 people have browsed it

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>

Copy after login

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.