jquery鼠标悬停修改背景色
时间: 2023-11-28 09:45:25 浏览: 147
以下是使用jQuery实现鼠标悬停修改背景色的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery鼠标悬停修改背景色</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
.menu {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
margin-right: 20px;
padding: 10px;
background-color: #333;
color: #fff;
cursor: pointer;
transition: background-color 0.5s ease;
}
.menu li:hover {
background-color: #f00;
}
</style>
</head>
<body>
<ul class="menu">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</body>
</html>
```
解释:
1. 首先在head标签中引入jQuery库。
2. 在style标签中定义菜单样式,包括菜单项的样式和鼠标悬停时的样式。
3. 在body标签中定义一个ul元素,并为其添加class为menu。
4. 在ul元素中添加四个li元素,分别为菜单项。
5. 使用jQuery选择器选中所有的li元素,并为其添加hover事件。
6. 在hover事件中使用jQuery的css()方法修改li元素的background-color属性。
相关问题:
阅读全文