css touch滑过与hover

CSS有两种交互方式：hover和touch。hover通常是指鼠标悬停在元素上时的效果，而touch则是在移动设备上通过手指滑过元素时的效果。

/*hover*/.box:hover{
    color: red;
    background-color: yellow;
}

上述代码表示当鼠标悬停在class为.box的元素上时，文字颜色变为红色，背景色变为黄色。

/*touch*/@media (hover: none){
.box:hover{
    color: initial;
    background-color: initial;
}
.box:active{
    color: red;
    background-color: yellow;
}
}
    

上述代码表示当设备支持touch时，取消鼠标hover效果，同时添加点击激活效果，文字颜色变红，背景色变黄。

需要注意的是，有些设备不支持hover事件，需要使用media query进行特殊处理，以提供更好的用户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！