MASABlazor在移动端点击保持出现悬停样式

提出问题

最近在学习MAUIBlazor,用的MASA Blazor,发现在移动端(触屏设备)上,点击会一直显示悬停样式,如下图所示,简单研究了一下,发现这是移动端的通病。

解决问题

MASABlazor中的悬停效果一般都是用::before实现的,所以理论上只要判断在移动端,并且在悬停时把::before的样式改为display:none;就可以了。
但是在实际上MASABlazor中图标也是用::before实现的,所以图标的样式应为为display:inline-block,这样就不会受到干扰了

@media (hover: none) {
    button:hover::before{
        display:none;
    }
    .m-icon:hover::before {
        display:inline-block
    }
}

posted @ 2022-10-25 19:51  Yu-Core  阅读(119)  评论(0编辑  收藏  举报