问

如何在html中使用纯JavaScript来切换类

mobiledu2502869617 发布于 2023-02-13 17:28

function

我有一个

,我想在悬停时切换它的类.

这是我的代码:

function a(){
    this.classList.toggle('first');
    this.classList.toggle('sec');
}
document.querySelector('#container').addEventListener('click', a );

我知道我的HTML或CSS没有问题.只是我必须改变并放置一些东西click,但我不知道是什么.

请帮忙!!

2 个回答

虽然仲镇华的方法肯定能行,最好给mouseenter和mouseleave自己的处理程序:

var container = document.querySelector('#container');

container.addEventListener('mouseenter', function(){
        this.classList.remove('first');
        this.classList.add('second');
})
container.addEventListener('mouseleave', function(){
        this.classList.add('first');
        this.classList.remove('second');
})


.first {
    background: green;
}

.second {
    background: orange;
}

<div id="container" class="first">
    TEST
</div>


                
                    2023-02-13 17:31  回答
                       似风似戏是梦而已


                        
                悬停事件称为"mouseenter"而不是"click".

<script type="text/javascript">
    function a(){
        this.classList.toggle('first');
        this.classList.toggle('sec');
    }
    document.querySelector('#container').addEventListener('mouseenter', a )
    document.querySelector('#container').addEventListener('mouseleave', a )
</script>

        
                
                    2023-02-13 17:32  回答
                       国务二局



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签





    PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 |  DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具  | 在线工具

    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved   京公网安备 11010802041100号  |  京ICP备19059560号-4 | PHP1.CN 第一PHP社区  版权所有