鼠标移动到左侧分类上时,右侧自动显示该分类的二级分类导航,鼠标离开时隐藏
时间: 2024-03-17 10:39:48 浏览: 39
这个问题是一个常见的前端开发问题,你可以使用JavaScript或者jQuery来实现这个功能。以下是一个使用纯JavaScript实现的示例代码:
```javascript
// 获取左侧分类元素和对应的二级分类导航元素
var categoryElements = document.querySelectorAll('.category');
var subNavElements = document.querySelectorAll('.sub-nav');
// 遍历左侧分类元素
for (var i = 0; i < categoryElements.length; i++) {
// 绑定鼠标移入事件
categoryElements[i].addEventListener('mouseenter', function() {
// 显示对应的二级分类导航
var subNavElement = this.nextElementSibling;
if (subNavElement) {
subNavElement.style.display = 'block';
}
});
// 绑定鼠标移出事件
categoryElements[i].addEventListener('mouseleave', function() {
// 隐藏对应的二级分类导航
var subNavElement = this.nextElementSibling;
if (subNavElement) {
subNavElement.style.display = 'none';
}
});
}
```
其中,`.category`是左侧分类元素的类名,`.sub-nav`是右侧二级分类导航的类名。你可以根据实际情况修改这些类名。