jquery获取鼠标悬停对象
时间: 2023-11-18 17:25:09 浏览: 43
$(selector).hover(function(){
//鼠标悬停时执行的代码
},function(){
//鼠标移开时执行的代码
});
其中,selector是指需要绑定hover事件的元素的选择器,可以是HTML元素、CSS类、ID等。在函数体中可以实现当鼠标悬停在该元素上时需要执行的代码以及当鼠标移开时需要执行的代码。
相关问题
jquery鼠标悬停修改背景色
以下是使用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属性。
相关问题:
jQuery鼠标悬停效果
很高兴回答你的问题。对于jQuery鼠标悬停效果,可以使用hover()方法或者mouseenter()和mouseleave()方法来实现。在hover()方法中,第一个参数表示鼠标移入元素时要执行的函数,第二个参数表示鼠标移出元素时要执行的函数。在mouseenter()和mouseleave()方法中,第一个参数表示鼠标进入元素时要执行的函数,第二个参数表示鼠标离开元素时要执行的函数。这些方法都是jQuery提供的快捷方式,方便我们实现鼠标悬停效果。