css悬停效果保留 |xml xslt css

// CSS代码实现：
a:hover {
color: #FFF;
background-color: #000;
}
a:active {
color: #000;
background-color: #FFF;
}

以上代码是实现悬停效果的基本代码，当用户将鼠标移到a标签上时，文字颜色变为白色，背景变为黑色。但是，一旦用户离开a标签，这个效果就消失了。为了让效果保留，大家可以使用JavaScript实现。

// JavaScript代码实现：
let aTags = document.getElementsByTagName('a');
for(let i = 0; i< aTags.length; i++) {
aTags[i].addEventListener('mouseleave', function() {
this.classList.remove('hover');
});
aTags[i].addEventListener('mouseenter', function() {
this.classList.add('hover');
});
}

以上代码的实现逻辑如下：当用户将鼠标移到a标签上时，会触发mouseenter事件，此时会为a标签添加一个class名为“hover”。当用户将鼠标移开时，会触发mouseleave事件，此时会将a标签的“hover”class移除，从而实现悬停效果保留。