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
}
}
MASABlazor在移动端点击保持出现悬停样式的更多相关文章
- 后台找到repeater里面的div并添加客户端点击事件
public partial class Inv_SelectWorkservice : System.Web.UI.Page,IPostBackEventHandler{ } 通过OnItemCre ...
- 取消a标签在移动端点击时的背景颜色
一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -m ...
- 移动端点击事件300ms延迟问题解决方案——fastclick.js
移动端点击事件300ms延迟的问题由来已久,如下截图 下面截图来自原文:https://www.jianshu.com/p/6e2b68a93c88 网上关于300ms延迟问题的解决方法,大致分为 3 ...
- 取消a标签或者onclick在移动端点击时的背景颜色
一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(, , , ); -webkit-user-select: none; -moz-user-fo ...
- 移动端点击300ms延迟
转载自:http://www.jianshu.com/p/6e2b68a93c88 一.移动端300ms点击延迟 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300m ...
- 怎么去除移动端点击a标签链接时的背景色
在手机端点击链接时会发现有一个背景色,有时候需要改变这个颜色,或者去除这个颜色,有时候a标签做成按钮时这个颜色的存在会很丑,像这样: 可以通过 -webkit-tap-highlight-color: ...
- Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...
- 在IOS端点击数字后会调起系统拨号界面
在IOS端点击数字后会调起系统拨号界面,解决方案: <meta name="format-detection" content="telephone=no" ...
- css取消a标签在移动端点击时的背景颜色
一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz ...
- 微信公众号使用vue,安卓端点击按钮404,ios访问正常问题
情景:微信公众号使用vue开发的单页面,在安卓端点击按钮访问显示404,ios访问正常问题,能正常显示. 解决:将微信公众号菜单按钮设置的路径中把WWW去掉后,安卓.ios都能正常访问. 问题路径ww ...
随机推荐
- 12-提取css成单独文件
const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const M ...
- ping功能实现(ICMP)
简单记录下项目中ping功能实现 笔记:ping功能实现 void Handler::handlePingDepot(const char *ip) { int mSize=50*1024; bzer ...
- Word中使用ChatGPT,写文档如有神助
[部署教程]国内网络可用,最强 ChatGPT 学术论文写作工具原创****付费 简介 Word GPT Plus 是一个集成了 chatGPT 模型的 Word 插件.它允许你基于你在文档中写的内容 ...
- 2021-12-26:给定一个长度为n的数组arr,求有多少个子数组满足 : 子数组两端的值,是这个子数组的最小值和次小值,最小值和次小值谁在最左和最右无所谓。 n<=100000(10^5) n*
2021-12-26:给定一个长度为n的数组arr,求有多少个子数组满足 : 子数组两端的值,是这个子数组的最小值和次小值,最小值和次小值谁在最左和最右无所谓. n<=100000(10^5) ...
- Structured Streaming 的异常处理 【Concurrent update to the log. Multiple streaming jobs detected】
目录 异常信息 一.异常表象原因 1.异常源码: 2.打个断点 二.解决方案 1.可以通过代码指定各分区的开始offset 2.不删除而是更改checkpoint offset下的批次文件 三.异常背 ...
- 记一次 Oracle 下的 SQL 优化过程
1. 介绍 事情是这样的,UAT 环境的测试小伙伴向我扔来一个小 bug,说是一个放大镜的查询很慢,转几分钟才出数据,我立马上开发环境试了一下,很快啊我说,放大镜的数据立马就出来了,然后我登录 UAT ...
- Qt数据可视化项目
一.创建项目(步骤按常规来即可) 二.ui设计界面 控件的使用 默认视角:Label标签和horizontalSlider标签 水平旋转:Label标签和horizontalSlider标签 垂直旋转 ...
- L2-035 完全二叉树的层序遍历
题目描述: 一个二叉树,如果每一个层的结点数都达到最大值,则这个二叉树就是完美二叉树.对于深度为 D 的,有 N 个结点的二叉树,若其结点对应于相同深度完美二叉树的层序遍历的前 N 个结点,这样的树就 ...
- ES5 apply与call详解
虽然es6已经出台了很多简单的方法替代了apply和call,但是还是有很多老大项目使用到了es5的这些方法,所以对于这些方法的掌握是有必要的 先回顾一下官方对apply.call的诠释 apply方 ...
- 2023-06-07:Redis 持久化方式有哪些?以及有什么区别?
2023-06-07:Redis 持久化方式有哪些?以及有什么区别? 答案2023-06-07: Redis提供了两种持久化机制:RDB和AOF. RDB RDB持久化是将Redis当前进程中的数据生 ...