css鼠标悬停效果代码，css盒子怎么设置鼠标悬停

实现CSS鼠标悬停效果的代码主要涉及两个部分：CSS盒子的设置和JavaScript监听。

1. CSS盒子的设置：

/* 定义鼠标悬停的容器 */
.hovered {
opacity: 0.8;
cursor: pointer;
}
/* 定义鼠标悬停的背景色 */
.hovered:hover {
background-color: #f5f5f5;
}

2. JavaScript监听：

// 获取所有具有鼠标悬停效果的元素
const elements = document.querySelectorAll('.hovered');
// 为每个元素添加鼠标进入和离开的事件监听器
elements.forEach(element => {
element.addEventListener('mouseenter', function() {
// 设置元素的透明度为0.8，使得悬停时不可见
element.opacity = 0.8;
// 设置鼠标悬停时的背景色
element.style.backgroundColor = '#f5f5f5';
// 设置悬停结束时的样式
element.style.opacity = 1;
});
element.addEventListener('mouseleave', function() {
// 设置元素的透明度为160%
element.opacity = 160;
// 移除悬停时的背景色
element.style.backgroundColor = '';
// 设置悬停结束时的样式
element.style.opacity = 0.8;
});
});

这样，当鼠标悬停在指定的元素上时，该元素将会显示鼠标悬停效果，即透明度为0.8，背景色为#f5f5f5。当鼠标离开时，元素的透明度恢复到1，背景色也会恢复到初始状态。