[分享]css两种颜色切换

CSS中有许多种方式可以实现颜色切换，其中最常用的两种就是使用:hover伪类和JavaScript的事件监听实现。下面我们来分别介绍这两种方式的具体实现方法。 / 使用:hover伪类实现颜色切换 ...

CSS中有许多种方式可以实现颜色切换，其中最常用的两种就是使用:hover伪类和JavaScript的事件监听实现。下面我们来分别介绍这两种方式的具体实现方法。

 /* 使用:hover伪类实现颜色切换 */
    .color-change {
        background-color: blue;
        color: white;
        padding: 10px;
        transition: background-color 0.5s;
    }
    .color-change:hover {
        background-color: red;
    } 

上述代码是使用:hover伪类实现颜色切换的例子，我们给一个class为color-change的元素设置了初始背景色为蓝色和文字颜色为白色，并且设置了一个0.5秒的渐变过渡。当鼠标移动到该元素上时，背景色会从蓝色渐变到红色。

 /* 使用JavaScript实现颜色切换 */ document.getElementById('color-change-btn').addEventListener('click', function() {
        var elem = document.getElementById('color-change');
        if (elem.classList.contains('blue')) {
            elem.classList.remove('blue');
            elem.classList.add('red');
        } else {
            elem.classList.remove('red');
            elem.classList.add('blue');
        }
    });

上述代码是使用JavaScript实现颜色切换的例子，我们使用addEventListener方法为id为color-change-btn的按钮添加了一个点击事件监听器。当点击按钮时，代码会获取id为color-change的元素并检查它是否已经包含了class名为blue的样式，如果已经包含则删除该样式并添加red的样式，反之删除red样式并添加blue样式。

无论是使用:hover伪类还是JavaScript，实现颜色切换的原理都是通过改变元素的样式来达到变色的效果。选择哪种方式更适合您取决于具体的使用场景。