场景：

（react实例）
对于一个列表，加上选中高亮样式：
1. pc端，鼠标滑过高亮
2. 移动端，点击div任意位置，整行高亮

问题描述：

在移动端，:hover属性生效了（黑色的边框border），如图：

原因分析：

在移动端，:hover的优先级高于class，如上图，最终的border颜色是黑色，而不是橘黄色。:hover被解析成click（mousedown）了；默认的click则是mouseup触发，效果如下图：

解决方案：

通过js的navigator.userAgent获取浏览器信息(类型及系统) , 是pc端才加上:hover

完整实例代码：

import classNames from 'classnames';
import React, { useEffect, useState } from 'react';
import  './App.css';enum pc {windows = 'windows',mac = 'macOS'
}
// 系统区分
function getOS() {var u = navigator.userAgent;if (!!u.match(/compatible/i) || u.match(/Windows/i)) {return 'windows';} else if (!!u.match(/Macintosh/i) || u.match(/MacIntel/i)) {return 'macOS';} else if (!!u.match(/iphone/i) || u.match(/Ipad/i)) {return 'ios';} else if (!!u.match(/android/i)) {return 'android';} else {return 'other';}
}function App() {const [selectId, setSelectId] = useState<string>('')const [isPc, setIsPc] = useState<boolean>(false)const msg = []for(let i = 0; i < 99; i++){msg.push({id: i})}useEffect(() => {const sys = getOS()setIsPc(sys === pc.windows || sys === pc.mac)}, [])const selectItem = (e: any) => {console.log(e.target.className);setSelectId(e.target.className.replace('list-', ''))}return (<div className="App"><div className={'lists-box'} onClick={(e) => selectItem(e)}>{msg.map(item => {return <divkey={item.id}className={classNames({'list-hover': isPc,'list-item': item.id.toString() === selectId,[`list-${item.id}`]: true})}>{item.id}</div>})}</div></div>);
}export default App;

.list-hover:hover{height: 30px;border: rgb(7, 7, 7) solid 2px;
}.list-item{height: 30px;border: rgb(241, 176, 90) solid 1px;background-color: rgb(241, 176, 90);
}

// 各主流浏览器
function getBrowser() {var u = navigator.userAgent;var bws = [{name: 'sgssapp',it: /sogousearch/i.test(u)}, {name: 'wechat',it: /MicroMessenger/i.test(u)}, {name: 'weibo',it: !!u.match(/Weibo/i)}, {name: 'uc',it: !!u.match(/UCBrowser/i) || u.indexOf(' UBrowser') > -1}, {name: 'sogou',it: u.indexOf('MetaSr') > -1 || u.indexOf('Sogou') > -1}, {name: 'xiaomi',it: u.indexOf('MiuiBrowser') > -1}, {name: 'baidu',it: u.indexOf('Baidu') > -1 || u.indexOf('BIDUBrowser') > -1}, {name: '360',it: u.indexOf('360EE') > -1 || u.indexOf('360SE') > -1}, {name: '2345',it: u.indexOf('2345Explorer') > -1}, {name: 'edge',it: u.indexOf('Edge') > -1}, {name: 'ie11',it: u.indexOf('Trident') > -1 && u.indexOf('rv:11.0') > -1}, {name: 'ie',it: u.indexOf('compatible') > -1 && u.indexOf('MSIE') > -1}, {name: 'firefox',it: u.indexOf('Firefox') > -1}, {name: 'safari',it: u.indexOf('Safari') > -1 && u.indexOf('Chrome') === -1}, {name: 'qqbrowser',it: u.indexOf('MQQBrowser') > -1 && u.indexOf(' QQ') === -1}, {name: 'qq',it: u.indexOf('QQ') > -1}, {name: 'chrome',it: u.indexOf('Chrome') > -1 || u.indexOf('CriOS') > -1}, {name: 'opera',it: u.indexOf('Opera') > -1 || u.indexOf('OPR') > -1}];for (var i = 0; i < bws.length; i++) {if (bws[i].it) {return bws[i].name;}}return 'other';
}// 系统区分
function getOS() {var u = navigator.userAgent;if (!!u.match(/compatible/i) || u.match(/Windows/i)) {return 'windows';} else if (!!u.match(/Macintosh/i) || u.match(/MacIntel/i)) {return 'macOS';} else if (!!u.match(/iphone/i) || u.match(/Ipad/i)) {return 'ios';} else if (!!u.match(/android/i)) {return 'android';} else {return 'other';}
}

使用@media screen限制hover样式生效时的屏幕分辨率,如图中，当屏幕宽＜1000px，则hover不生效（屏幕宽＜1000px，则hover不生效）

兼容移动端:hover相关推荐

JS实现css的hover效果，兼容移动端
Hi I'm Shendi JS实现css的hover效果,兼容移动端功能概述 CSS的hover即触碰时触发,在电脑端鼠标触碰,移动端手指触摸有的时候光靠css实现不了一些效果,例如元素触发ho ...
移动端自适应布局和响应式页面兼容移动端布局
上篇博客讲到了移动端的常用布局模式之一:Flex布局,这篇博客咱们来了解一下移动端的另外两种布局--移动端自适应布局和响应式页面兼容移动端布局. 目录一.移动端自适应布局 1.rem 什么是rem ...
css 波纹扩散_html5 +css3 点击后水波纹扩散效果兼容移动端
html5+ js +css3 点击后水波纹扩散效果兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
elementui el-from 怎样显示图片_vue2.0使用weui.js的uploader组件上传图片(兼容移动端)...
本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 最近在使用 vue2.0开 ...
[html] 制作一个页面时，需要兼容PC端和手机端，你是要分别做两个页面还是只做一个页面自适应？为什么？说说你的理由
[html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由两个页面 pc端布局和交互行为跟移动端不一样, 两个页面反而更好维护个人简介 ...
pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）
swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:(https://www.swiper.com.cn/) 效果演示: PC端移动端(在浏览器将设备切换为手机,这里 ...
Emoji-Chat emoji表情包发送及显示兼容web端、移动端
Emoji-Chat emoji表情包发送及显示兼容web端.移动端序言在如今聊天表情包满天飞的当下,聊天过程中想发送个表情感慨一下情绪在所难免,当下我就遇到这么个需求,希望在web端聊天室中可以 ...
html和js制作个人所得税表格,原创文章:使用Vuejs实现个人所得税功能兼容移动端...
使用vuejs实现个人所得税的功能,包含5000起点和3500起点之间个税的变化,并且兼容移动端. css部分如下: #saper-container { width:86%; margin:0 au ...
web返回的数据集格式_200G倾斜数据无插件web端预览！兼容三端，有容乃大—MapGIS M3D数据格式...
"有容乃大"最早见之于明代兵部尚书太子太保袁可立在河南睢州自己"弗过堂"中所著的自勉联.二百年后又有清末民族英雄林则徐题于书室的八字联:"海纳百川,有 ...

兼容移动端:hover

场景：

问题描述：

原因分析：

解决方案：

兼容移动端:hover相关推荐

最新文章

热门文章