jQuery 导航栏中选中第一个li为固定颜色,鼠标经过第二个li的时候改变颜色事件
时间: 2024-02-12 14:03:09 浏览: 85
鼠标经过导航菜单时颜色改变效果
可以使用以下代码实现:
```javascript
$(document).ready(function() {
// 默认选中第一个li
$("ul li:first").addClass("active");
// 鼠标经过第二个li时改变颜色
$("ul li:nth-child(2)").hover(
function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
}
);
});
```
其中,我们使用 `addClass()` 方法为第一个 li 添加 `active` 类,以固定其颜色。使用 `hover()` 方法为第二个 li 绑定鼠标移入和移出事件,当鼠标移入时添加 `hover` 类,移出时移除该类,以实现改变颜色的效果。需要在 CSS 中定义 `active` 和 `hover` 类的样式。
阅读全文