基于jQuey实现鼠标滑过变色(整行变色)

网络编程 2025/1/17 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

在很多网站都有这样的效果，那就是当鼠标放在新闻列表一行上的时候，整行就会变色，虽然使用CSS也能够实现此种功能，但是由于众多浏览器版本对于CSS3并没有良好的支持，所以在当前情况下，使用jQuery实现此种功能是一个不错的选择。

废话不多说了，直接给大家贴jquery代码了，具体代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://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="/UploadFiles/2021-04-02/jquery-1.8.3.js">

以上代码实现了所需功能，尽管不够美观，可以根据实际需求自行修改。实现的方法也非常的简单，就是利用hover()方法为hover事件绑定两个事件处理函数，以添加或者删除设置li元素背景颜色的CSS代码。


以上代码也很简单，大家有哪里不清楚的地方欢迎给我留言，我会及时给大家答复的，同时感谢大家一直以来对网站的支持。

鼠标滑过变色,鼠标滑过字体变色