pointer-events: none不工作
pointer-events: none是CSS属性，用于控制元素是否响应鼠标或触摸事件。当将该属性应用于一个元素时，该元素将不会接收任何鼠标或触摸事件，而是将事件传递给下层元素。
然而，如果在某些情况下pointer-events: none不起作用，可能是由于以下原因：
- 元素的父级元素或祖先元素设置了pointer-events: auto或其他值，覆盖了该元素的设置。在这种情况下，需要检查并确保所有相关的父级元素都设置为pointer-events: none。
- 元素的CSS样式被其他样式规则覆盖。在这种情况下，可以使用更具体的CSS选择器或!important来确保pointer-events: none生效。
- 元素的position属性值为static，而不是relative、absolute或fixed。pointer-events属性只对具有相对或绝对定位的元素起作用，因此需要确保元素的position属性设置正确。
- 元素被其他元素覆盖或隐藏。如果元素被其他元素遮挡或隐藏，pointer-events: none将无法生效。需要确保元素在层叠顺序上位于其他元素之上，并且没有被隐藏。
总结起来，要使pointer-events: none生效，需要确保没有其他CSS样式或元素层叠顺序的问题导致其失效。如果问题仍然存在，可以进一步检查代码和调试以找到具体原因。
关于pointer-events属性的更多信息，您可以参考腾讯云的CSS文档：CSS pointer-events属性
相关·内容
1回答
Div无法识别悬停
jquery、html、css
我设置了一个悬停效果，在我正在工作的网站上的instagram feed上显示一个图标覆盖和过滤。当我继续检查并将元素状态设置为悬停时，它可以完美地工作。然而，当实际使用该网站并将鼠标悬停在图像上时，她的鼠标悬停效果并未出现。
为什么不能识别悬停状态？
#insta-feed>a>img,
.ig__overlay--container {
width: 25vw !important;
height: 25vw !important;
}
.ig__overlay--container {
left: 0px;
background-color: rgba(
浏览 7提问于2017-06-17得票数 0
回答已采纳
6回答
需要关于CSS代码的说明
css
我在一个站点的CSS页面中有以下代码
left: 0 !important;
在这段代码中，这个!important到底是什么意思？
我以前从来没在任何地方见过这个。
浏览 0提问于2012-09-20得票数 0
回答已采纳
1回答
使用指针事件拖放元素:无
javascript、css、drag-and-drop
我正在尝试使用触摸和鼠标事件的非本地拖放。
我采用的方法是克隆拖动源并移动克隆。所有事件都附在文档中。克隆获得应用pointer-events: none的CSS，以允许克隆下的元素被计算为mousemove或touchmove事件的事件目标，而不是克隆本身。
这在所有桌面浏览器(鼠标)中都很有效，但在ipad上使用单点触摸进行测试时似乎没有任何效果--即克隆总是显示为事件目标。我试过寻找一个合理的数量，这让我相信这是可能的，但我没有看到任何结论。
如果克隆元素有帮助，则具有以下CSS：
.mirror {
position: fixed !important;
margin:
浏览 3提问于2017-04-01得票数 2
回答已采纳
11回答
CSS禁用悬停效果
css、hover
我需要在整个DOM中的特定按钮(而不是所有按钮)上禁用鼠标悬停。请让我知道如何使用CSS类来实现它。
当我的按钮被禁用时，我正在使用下面的CSS类。现在，我想使用相同的类来移除悬停效果。
.buttonDisabled
{
Cursor:text !important; Text-Decoration: None !important;
}
上面的类将负责删除鼠标悬停时的手势和文本下划线。现在我也想去掉悬停效果。请让我知道。
浏览 4提问于2014-11-05得票数 85
1回答
javascript汉堡包菜单并不总是触发javascript
javascript、html、css、menu、hamburger-menu
我有一个简单的移动/小屏幕汉堡包菜单，包括图标的div和实际按钮的div。如果单击图标，则使菜单展开/显示的javascript不会启动。我环顾四周，大多数答案都说要更改javascript，所以点击图标也会触发它，但我一直无法让它发挥作用。
HTML：
<div onclick="myFunction(); hamburger(this)" class="dropbtn dropdown">
<div class="bar1"></div>
<div class="bar2"&g
浏览 1提问于2017-08-23得票数 1
回答已采纳
5回答
CSS中有没有一个“指针-事件:hoverOnly`”或者类似的东西？
html、css、pointer-events
我刚刚在CSS中使用了pointer-events属性。
我有一个对除:hover之外的所有鼠标事件都不可见的div。
因此，所有的单击命令都会通过div传递到它下面的命令，但是div可以报告鼠标是否仍然在它上面。
谁能告诉我这是不是可以做到？
HTML：
<div class="layer" style="z-index:20; pointer-events:none;">Top layer</div>
<div class="layer" style="z-index:10;">Bottom
浏览 79提问于2014-03-04得票数 124
回答已采纳
2回答
.remove()在D3中的临时替代方案
javascript、css、d3.js、tooltip、mouseevent
我正在进行一个项目，在这个项目中我将工具提示附加到DOM中。当我在一个对象上鼠标移动时，工具提示就会消失到视图中。当我离开的时候，工具提示就会消失。
我遇到的问题是，它仍然在其他元素之上，从而阻止了它们的鼠标控制事件的触发。通常，我只需删除元素：d3.select("#theElement").transition().style("opacity",0).remove()
问题是，我希望以后能在鼠标移动时重新添加它。有没有一种方法可以暂时固定工具提示不会妨碍它的地方呢？也许是在教堂里什么的？大多数人是如何在D3中处理这个问题的？
浏览 3提问于2018-01-26得票数 4
回答已采纳
1回答
带有指针事件和鼠标滚动的Chrome bug？
css、google-chrome
复制小提琴:调整大小，直到垂直滚动条出现：
预期行为:在黄色区域使用时，鼠标轮滚动。
观察到的行为:在Chrome中不工作，在Firefox中工作很好。
HTML代码：
<div class="parent"><input /><div class="child"><div class="subChild"><input /></div></div></div>
CSS代码：
html,body{
overflow:hidden;
heig
浏览 2提问于2018-01-11得票数 6
回答已采纳
3回答
从overlay div获取鼠标事件(单击)
javascript
我有下面的代码，在iframe上有一个不可见的div。我想要获取在iframe上执行的所有鼠标事件(现在让我们只听click)。但是，如果我将pointer-events设置为none，则不会调用click侦听器。
我也尝试过实现这个，但是没有成功：
我的目标是监听iframe中发生的任何事件，并在主窗口中弹出一条消息：“在iframe中发生了一些事件”。我不想知道更多关于iframe中事件的信息，只要它们是被触发的还是没有触发的。
注意: iframe的src与窗口是不同的域。
如果这是可能的，有什么想法吗？
jQuery(function($) { // DOM ready
$(
浏览 0提问于2018-08-03得票数 0
1回答
为什么我的自定义“光标”落在移动的div元素的后面，当我悬停在它们上面时？
javascript、html、css
大家好，希望你们今天过得愉快！所以，我正在构建一个简单的游戏，我使用一个定制的光标作为目标，拍摄div元素在屏幕周围移动作为敌人，当我应用"pointerdown“事件时，我希望敌人改变它的颜色。然而，每当我在敌人上空盘旋时，光标就落在女巫后面，我不明白为什么，当我使用z-index属性时，它将防止"pointerdown“事件的发生。如果某个酷酷的OG程序员能帮我，那对我来说意义重大。
风格
* {
margin: 0;
padding: 0;
cursor: none;
}
.aim {
position: absolute;
background: black;
wid
浏览 5提问于2022-11-15得票数 0
回答已采纳
5回答
是否停止Iframe阻止父文档滚动？
html、css、iframe
对于iframe和滚动，我的问题似乎与其他人相反。我需要的iframe (包含一个youtube视频)，以不阻止滚动的主要文件。如果我将鼠标悬停在它上面，页面将不会随着滚轮一起滚动，而且根据最新的铬金丝雀模拟触摸设备，我也不能将手指放在框架上并滚动主文档。有什么办法能阻止这一切吗？我的CSS如下：
.GalleryVideoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
width:95%;
margin:auto;
display:block;
}
浏览 5提问于2014-11-23得票数 25
2回答
使固定子div不会阻止父目录滚动
javascript、html、css
我有一个固定父div，它包含具有绝对位置的元素，溢出的父大小，以及一个具有高z索引的固定元素，它作为父级悬停到另一个子级的位置。 代码： <div style="position:fixed;width:70%;height:70%;overflow-y:scroll;z-index:100;background:lightgrey;overflow-x:hidden">
<div style="position:absolute;width:50%;height:10%;z-index:1;background:darkgrey;top:10%&
浏览 27提问于2020-04-28得票数 0
2回答
CSS样式不是“层叠”吗？
css、hyperlink
我正在更新某人的网站。他们选择<a>标签的标记如下所示：
#wrapper a{color: red;}
这很好。但是，如果我在包装器中创建一个<div>，并为它提供我自己的<a>标记样式，例如：
.mydiv a{color: white;}
它根本不起作用-我的<div>中的color:white被包装中的颜色:红色覆盖，即使.mydiv css位于我的外部样式表上的#wrapper css下面。更重要的是，每个其他样式-背景-颜色，边框等-都很好用！
浏览 0提问于2012-06-20得票数 5
回答已采纳
1回答
如何使<div>覆盖整个页面而不仅仅是视图
html、css、overlay、viewport、cover
我在试着把我的整页都盖上。目前，问题是它只覆盖了viewport的大小(例如，1920x1080px)。
这是我目前使用的div的CSS：
#cursor-container {
position: absolute;
z-index: 99999;
pointer-events: none;
overflow-x: auto;
background-color: rgba(0, 0, 0, 0.25);
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
现在看起来是
浏览 1提问于2021-11-18得票数 0
回答已采纳
2回答
CSS -鼠标悬停时触发回放
css、less
我正在制作CSS滑块动画。除了最后一件事外，一切都做得很好：
想要的行为是，如果我悬停在滑块拇指，滑块的高度和价值移动在滑块的中心。但是，当滑块拇指位于新定位值的下方时，它会返回到以前的大小(基本上恢复动画)。
我认为我需要某种“通过”，这样即使我技术上没有在滑块上徘徊，这个值也不会干扰我的动画。
我知道，这一点还不清楚，这就是为什么我要包括一个代码专家，以帮助你更好地理解我的意思。改变滑块，并在29停止它。然后再试着滑动，你会看到错误的效果和我的意思。
我还在这里发布代码，以供将来参考：(注意:使用LESScss完成)：
@temp0-14: #185fb6;
@temp15-19: #00
浏览 0提问于2018-04-06得票数 1
回答已采纳
2回答
如何使鼠标滚动的div滚动内容？
javascript、jquery、html、css
朋友们，有什么办法可以让这个div滚动甚至与鼠标在盒子上吗？？
Html：
<div class="container">
<div class="container-scroll">
<ul class="list">
<li class="list-item one"></li>
<li class="list-item two">&l
浏览 2提问于2015-04-15得票数 0
8回答
如何防止css继承
html、css
下面是我使用的示例代码块。我有两套css，并希望应用到两个UL组件上。然而，结果出来了，内部的"UL“将持有一些为其父级定义的css。甚至在"b“中定义的某些css也会被”a“覆盖.噩梦..。
我怎样才能停止继承？
<ul class="moduleMenu-ul">
/* for loop begin */
<li class="moduleMenu-li">
<a></a>
</li>
/* for
浏览 7提问于2009-08-20得票数 54
1回答
使png跟随鼠标，同时仍然能够通过它进行交互
jquery、mouse、transparent、jquery-events
我正试着在我的网站上做一个手电筒效果。你应该能够用你的鼠标移动手电筒，我已经制作了一个黑色的png，中间有一个透明的跟随我的鼠标。问题是，我希望能够与png下面的东西交互。我找到的唯一方法是使用"pointer-events: none;"，但是png不会跟随我的鼠标。
有没有办法让我的png遵循鼠标，而不是其他任何东西，但仍然能够点击通过png？
这是我跟随鼠标的代码：
$("#back").mousemove(function(e){
$('.follow').css('top', e.clientY-2000).cs
浏览 4提问于2013-10-27得票数 1
4回答
纯CSS & JS下拉菜单- onmouseover问题
javascript、html、css
我编写了这段代码来创建简单的CSS和Javascript下拉菜单。
HTML：
<li><a href="#" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">XYZ</a>
<ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">
浏览 2提问于2013-09-06得票数 2
回答已采纳
4回答
单击时隐藏Div
javascript、jquery、html、css、hover
我有一个小的HTML/CSS/JQuery下拉菜单。我的伪代码是：
function closeMenus() {
$('.subMenu').css('display', 'none');
}
#mainMenu ul li .subMenu {
display: none;
position: absolute;
}
#mainMenu ul li:hover .subMenu {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/
浏览 3提问于2011-10-12得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
