提出问题

最近在学习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
}
}

MASABlazor在移动端点击保持出现悬停样式的更多相关文章

  1. 后台找到repeater里面的div并添加客户端点击事件

    public partial class Inv_SelectWorkservice : System.Web.UI.Page,IPostBackEventHandler{ } 通过OnItemCre ...

  2. 取消a标签在移动端点击时的背景颜色

    一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -m ...

  3. 移动端点击事件300ms延迟问题解决方案——fastclick.js

    移动端点击事件300ms延迟的问题由来已久,如下截图 下面截图来自原文:https://www.jianshu.com/p/6e2b68a93c88 网上关于300ms延迟问题的解决方法,大致分为 3 ...

  4. 取消a标签或者onclick在移动端点击时的背景颜色

    一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(, , , ); -webkit-user-select: none; -moz-user-fo ...

  5. 移动端点击300ms延迟

    转载自:http://www.jianshu.com/p/6e2b68a93c88 一.移动端300ms点击延迟 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300m ...

  6. 怎么去除移动端点击a标签链接时的背景色

    在手机端点击链接时会发现有一个背景色,有时候需要改变这个颜色,或者去除这个颜色,有时候a标签做成按钮时这个颜色的存在会很丑,像这样: 可以通过 -webkit-tap-highlight-color: ...

  7. Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  8. 在IOS端点击数字后会调起系统拨号界面

    在IOS端点击数字后会调起系统拨号界面,解决方案: <meta name="format-detection" content="telephone=no" ...

  9. css取消a标签在移动端点击时的背景颜色

    一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz ...

  10. 微信公众号使用vue,安卓端点击按钮404,ios访问正常问题

    情景:微信公众号使用vue开发的单页面,在安卓端点击按钮访问显示404,ios访问正常问题,能正常显示. 解决:将微信公众号菜单按钮设置的路径中把WWW去掉后,安卓.ios都能正常访问. 问题路径ww ...

随机推荐

  1. LeetCode 周赛 342(2023/04/23)容斥原理、计数排序、滑动窗口、子数组 GCB

    本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 大家好,我是小彭. 前天刚举办 2023 年力扣杯个人 SOLO 赛,昨天周赛就出了一场 Easy - Ea ...

  2. [Pytorch框架] 1.4 Autograd:自动求导

    文章目录 Autograd: 自动求导机制 张量(Tensor) 梯度 Autograd: 自动求导机制 PyTorch 中所有神经网络的核心是 autograd 包. 我们先简单介绍一下这个包,然后 ...

  3. Prism Sample 17-BasicRegionNavigation

    本例是基础的导航应用 在窗口中布局了2个按钮,一个区域 <DockPanel LastChildFill="True"> <StackPanel Orientat ...

  4. docker常用命令之帮助启动类命令和镜像命令

    docker安装之后,启动时会报如下错误: Job for docker.service failed because start of the service was attempted too o ...

  5. Unity快速接入bugly, 支持Unity2021

    鹅厂提供的bugly官方demo工程打包后台也查不到日志,N年不更新(官方已经说不再维护),为此本人做了部分修改测试,提供一个快速接入工程的demo. Unity2021因为版本原因腾讯官方工程不能使 ...

  6. 2020-12-19:系统load过高,你怎么去查?

    福哥答案2020-12-20:[答案来自此链接:](http://bbs.xiangxueketang.cn/question/800)1.top命令查看该机器的负载状况.2.cd /proc/pid ...

  7. Selenium - 快速上手之启动浏览器

    Selenium - 浏览器启动/关闭 使用webdriver前,需要先导入包 from selenium import webdriver,每次打开浏览器时; 执行完毕要记得关闭浏览器,使用 dri ...

  8. url函数

    url() 函数看起来的格式象:url(r^/account/$', views.index, name=index),它可以接收四个参数,分别是两个必选参数:regex.view 和两个可选参数:k ...

  9. HNU2019 Summer Training 3 E. Blurred Pictures

    E. Blurred Pictures time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  10. SVM主体思路和代码实现

    之前学习的KNN算法属于直接将所有的训练图片数据化,根据图片的像素值进行判断,最简单的NN算法是用与待判断图片的差距最小(距离最近)的那张图片的类别当做此图片的类别,我们不难看到,1NN算法的正确性很 ...