css 点击(onMouseDown和onMouseUp)后,hover失效

最新推荐文章于 2024-05-13 11:14:05 发布

puspos

最新推荐文章于 2024-05-13 11:14:05 发布

阅读量816

点赞数

分类专栏： css 文章标签： hover onMouseDown onMouseUp

本文链接：https://blog.csdn.net/puspos/article/details/112257348

版权

当使用onMouseDown和onMouseUp事件改变CSS背景色时，会导致hover效果失效，因为内联样式优先级高于:hover。解决方法是避免使用!important来保持事件效果和悬停效果的正常工作。

摘要由CSDN通过智能技术生成

希望结果

正常情况蓝色，悬停时浅蓝，onMouseDown时深蓝，onMouseUp时蓝色

最初代码

<style>
#div{
	background:蓝色;
}
#div:hover{
	background:浅蓝;	
}
<div id="div" onmousedown="mouseDown()" onmouseup

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

puspos

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Unity物体脚本中的OnMouseDown()有时不起作用

【看这个就对了】

04-02

7413

我在制作2D游戏时发现有物体点击没反应的情况，查找了许多资料后得到了答案。首先要确保OnMouseDown()所在脚本在物体身上其次，在制作2D游戏的时候，从怪物死亡后身上掉落的物品，因为被其他角色的碰撞盒所覆盖，所以点击无法触发OnMouseDown()。如图右侧的紫色瓶子（这是自己做的毕设，素材是从某宝购买的）解决办法：查找了资料发现，只需要在Edit -> Project Setting -> physics中取消勾选Queries Hit Triggers就

【javascript/css】关于鼠标事件onmousexxx和css伪类hover

weixin_30556959的博客

11-07

262

　　在运用鼠标移入移出事件时，一般有两种做法，一种是DOM事件的"onmouseover"和"onmouseout"，还有一种是css的伪类":hover"。　　在实际运用中如何选择，取决于清楚明白的了解他们之间的区别。　　　HTML DOM 允许 JavaScript 对 HTML 事件作出反应。　　在我们为元素绑定了一个事件，当事件发生的时候，可以执行一段javascript代...

参与评论您还未登录，请先登录后发表或查看评论

拖拽事件中mouseUP失效导致移动一直跟随鼠标

weiwudexinyang的博客

03-31

1403

每次都放这个图是因为希望大家在解决bug的烦躁中看到太阳花，能开心一些

原生js拖拽元素(onmouseup不能够触发的原因)

最新发布

wzw88486969的专栏

05-13

264

onmouseup不能够触发的原因：https://blog.csdn.net/z467469274/article/details/77332830?这次拖拽遇见一个问题，有时在拖拽的时候吗，鼠标松开，元素仍然可以拖拽；会触发H5原生的拖拽事件。并且不会监听到onmouseup,我们经常会遇见拖拽某一个元素的场景，拖拽也是很常用的；解决办法就是直接干掉H5的拖拽事件。从而导致鼠标松开也能够拖拽。

CSS中鼠标事件。

masterShaw的博客

04-11

2140

几种鼠标触发CSS事件。说明： onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标时触发 onMouseOut 鼠标移出时触发 onMouseMove 鼠标移动时触参考url： http://www.jb51.net/article/41124.htm

htmlcss面试基础题

qq_44904200的博客

12-31

428

htmlcss面试基础题 1. 用css画一条长100px, 宽0.5px的细线;(移动端) 思路： transform: scaleX() 2. 给body设置背景色, 背景色会影响到body默认的margin区域吗? 会 3. 页面body标签内设置一个盒子,其宽度是屏幕宽的40%,其高度是其宽度的60%(css写); 4. 有关定位(position)的理解: - 当父级元素(含祖先元素)没有设置position的relative和absolute属性值时;子元素设置了position: absolu

HTML5、CSS、JS基础

qq_49101841的博客

03-03

2256

学习笔记

HTML+CSS+JavaScript+JQuery+JSP学习笔记

Be_Proud的博客

11-21

1029

HTML标签 1.段落 2.换行 3.标题-- 字体由大到小 4.水平线 5.注释 6.(加粗倾斜不常用) 7.下标上标 8.预格式文本用的不多 9.地址标签 10.删除线下划线 11.链接：文本链接图像链接

校招面试冲刺

weixin_45221036的博客

08-24

1793

HTML 1】语义化：尽可能少的使用无语义的标签div和span 在语义化不明显时，尽量使用p标签，因为p在默认情况下有上下间距需要强调的文本，可以包含在strong或em标签中，strong默认样式是加粗（不要用b），em是斜体（不要用i）什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。 <header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。 <nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页

CSS 鼠标响应事件，鼠标经过CSS，鼠标移动CSS，鼠标点击CSS

#维多利亚的秘密#

10-11

4653

几种鼠标触发CSS事件。说明： onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标时触发 onMouseOut 鼠标移出时触发 onMouseMove 鼠标移动时触 CSS 鼠标响应事件 .Off{ background-color: #

基本拖拽效果,使用 mousedown , mousemove , mouseup实现

weixin_30602505的博客

11-17

290

1.一个div拖拽效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本拖拽效果</title> <script src="../../common/jquery-1.8.3....

[Web]Web前端知识点总结

疯一样的女子

04-18

5330

HTML的编辑器：DreamWeaver 鼠标的移入和移出方法：hover（）在jsp中用<%%>就可以写Java代码了，而html没有<%%> 在W3C指定的HTML5规范中,对于HTML5在语法结构上的规格限制是较松散的,<HTML><htmL>不区分大小写，...

CSS 手机端 hover 点击后无法取消样式解决方案

且听风吟的博客

11-25

3368

CSS 手机端 hover 点击后无法取消样式解决方案

JS中鼠标拖拽div(onmousedown、onmousemove、onmouseup)

Fantasc的博客

08-11

4148

onmousedown：鼠标的按下事件 onmouseove：鼠标的移动事件 onmouseup：鼠标的松开事件思路：想实现鼠标拖拽div移动的效果，就得先获取到div，然后给div绑定鼠标按下的事件，在按下事件中绑定移动事件，在移动事件中将鼠标的坐标赋值给div即可实现div随鼠标移动而变换位置，但是只是这样的话，在鼠标松开之后div还是会跟着鼠标动，所以还要绑定鼠标松开的事件。在鼠标的送事件结束后，鼠标的一移动事件和松开事件就不需要在执行，需要执行就得出发鼠标按下事件，在最后得销毁移动和松开事件。

转载-解决OnMouseDown OnMouseUp与OnClick事件的冲突问题

weixin_34019144的博客

03-29

3204

2019独角兽企业重金招聘Python工程师标准>>> ...

不同浏览器onmousedown事件的处理

huangbaokang的博客

05-29

1878

document.getElementById("#id").onmousedown=toggleColor; function toggleColor(evt) { if (evt) { var thisSquare = evt.target; } else { var thisSquare = window.event.srcElement; } if (thisSquare....

鼠标点击事件：onmousedown与onmouseup实现动态效果

在本章节中，我们将深入探讨鼠标的按下（onmousedown）和松开（onmouseup）事件在JavaScript中的应用。鼠标事件是用户界面交互的核心组成部分，它们帮助开发者控制网页元素的响应。这两个事件在网页编程中扮演着关键...