元素从鼠标下移出后,悬停状态为粘性。这种效果可以在所有浏览器中实现,包括Chrome、Firefox、Safari等。
实现方法如下:
cursor
属性,将鼠标样式更改为手型或其他样式,如下所示:cursor: pointer;
hover
选择器,在鼠标悬停时更改样式,如下所示:div:hover {
background-color: #eee;
/* 其他样式设置 */
}
// 获取元素
const element = document.querySelector('div');
// 鼠标悬停时更改背景颜色
element.addEventListener('hover', function () {
this.style.backgroundColor = '#eee';
});
@keyframes hoverEffect {
0% {
height: 60px;
background-image: url(image.jpg);
}
100% {
height: 100px;
background-image: url(image-hover.jpg);
}
}
/* CSS样式 */
div {
height: 60px;
background-image: url(image.jpg);
animation: hoverEffect 2s;
}
/* JavaScript代码 */
const element = document.querySelector('div');
element.addEventListener('hover', function () {
element.style.height = '100px';
element.style.backgroundImage = 'url(image-hover.jpg)';
});
以上是实现悬停效果的基本方法,可以根据实际需求进行扩展和定制。
领取专属 10元无门槛券
手把手带您无忧上云