提出问题

最近在学习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. springboot注解@PostContruct以及@Cacheable

    1.@PostContruct @PostConstruct和@PreDestroy两个注解被用来修饰一个非静态的void()方法. @PostConstruct 加该注解会在项目启动的时候执行该方法 ...

  2. vue刷新当前组件的方法

    一:v-if控制组件,先设false,再true强制刷新组件(有时会产生一种奇怪的效果) 1 <medical-record v-if="fresh" /> 2 3 t ...

  3. iOS APP启动广告实现方式 与 APP唤端调用

    APP启动广告功能实现要从2个方面思考 一是UI方案,怎样处理广告页与主页之间的切换方式. 二是广告页展示时机,是使用后台实时广告数据还是使用本地缓存广告数据.后台数据方式获取广告最新但是用户要等待后 ...

  4. 2022-10-18:以下go语言代码输出什么?A:panic;B:编译错误;C:moonfdd1。 package main import ( “fmt“ “net/url“ ) // 其中

    2022-10-18:以下go语言代码输出什么?A:panic:B:编译错误:C:moonfdd1. package main import ( "fmt" "net/u ...

  5. 解决:Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。

    启动django应用时报如下错误:Error: [WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试. 1.首先退出酷狗音乐再试试 2.是8000端口被其他程序占用了, ...

  6. Django admin管理工具的使用、定制及源码解析

    admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你可以在项目的 settings.py 中的 INSTALLE ...

  7. 2014年蓝桥杯C/C++大学B组省赛真题(地宫寻宝)

    题目描述: X 国王有一个地宫宝库.是 n x m 个格子的矩阵.每个格子放一件宝贝.每个宝贝贴着价值标签. 地宫的入口在左上角,出口在右下角. 小明被带到地宫的入口,国王要求他只能向右或向下行走. ...

  8. 使用 StarCoder 创建一个编程助手

    如果你是一个软件开发者,你可能已经使用过 ChatGPT 或 GitHub 的 Copilot 去解决一些写代码过程中遇到的问题,比如将代码从一种语言翻译到另一种语言,或者通过自然语言,诸如" ...

  9. 图扑虚拟现实 VR 智慧办公室可视化

    前言 "虚拟现实"是来自英文"Virtual Reality",简称 VR 技术,其是通过利用计算机仿真系统模拟外界环境,主要模拟对象有环境.技能.传感设备和感 ...

  10. jvm中类和对象定义存储基础知识

    1 类文件数据结构类型 Class文件结构主要有两种数据结构:无符号数和表 •无符号数:用来表述数字,索引引用.数量值以及字符串等,比如 图1中类型为u1,u2,u4,u8分别代表1个字节,2个字节, ...