Javascript CSS指针事件：允许悬停时无

我正在尝试在我的页面顶部创建一个可以悬停的元素。当鼠标悬停时，我想更改元素的不透明度，并允许单击通过

问题是，当我添加

指针事件：none

以允许点击时，我的悬停永远不会被触发，这似乎是合乎逻辑的。我想我可以用javascript处理它，但event

mouseover

或

mouseenter

与

指针事件：none

不兼容

下面是我的示例，只使用css：如果我添加

指针事件：无它不工作。元素是红色横幅，我希望能够单击下面的按钮，同时降低它的不透明度


body{margin:0；padding:0；}
.title{字体大小：粗体；右边距：10px；}
.container{边距：0自动；宽度：80%；位置：相对；溢出：隐藏；}
.content{高度：300px；边框：1px实心#c8c8c8；}
导航{背景色：#efebe0；填充：20px；}
按钮{填充：10px；背景色：#9ebf00；边框：1px实心#86a200；边框半径：5px；边距：0 5px 0 5px；}
button.right{float:right；}
班杜先生{
位置：绝对位置；
背景：红色无重复滚动0%0%；
宽度：300px；
高度：40px；
z指数：2；
字体大小：30px；
颜色：白色；
字体大小：粗体；
文本对齐：居中；
右：-70px；
变换：旋转（45度）；
顶部：60px；
显示：块；
过渡：0.2s缓进缓出；
指针事件：无；
}
班多：悬停{
不透明度：0.4；
}

假例子
家
定价
联系我们
登录
我会回来的！
在您的示例中，您可以轻松地将鼠标悬停在整个导航元素上，如

nav:hover + .content + .bandeau {  opacity: 0.4; }

或者您可以将banner元素移动到，因为它是绝对定位的元素。然后将鼠标悬停在登录按钮上（使用.right类）将使其透明：


body{margin:0；padding:0；}
.title{字体大小：粗体；右边距：10px；}
.container{边距：0自动；宽度：80%；位置：相对；溢出：隐藏；}
.content{高度：300px；边框：1px实心#c8c8c8；}
导航{背景色：#efebe0；填充：20px；}
按钮{填充：10px；背景色：#9ebf00；边框：1px实心#86a200；边框半径：5px；边距：0 5px 0 5px；}
button.right{float:right；}
班杜先生{
位置：绝对位置；
背景：红色无重复滚动0%0%；
宽度：300px；
高度：40px；
z指数：2；
字体大小：30px；
颜色：白色；
字体大小：粗体；
文本对齐：居中；
右：-70px；
变换：旋转（45度）；
顶部：60px；
显示：块；
过渡：0.2s缓进缓出；
指针事件：无；
}
.右：悬停+.bandeau{
不透明度：0.4；
}

假例子
家
定价
联系我们
登录
我会回来的！
我根据@yanca链接的评论找到了一个解决方案。
我使用
document.element frompoint
根据横幅下方的元素检查应该显示的光标（指针或自动）。然后我重新使用
document.element frompoint
来传递点击

代码如下：


document.addEventListener（'DOMContentLoaded'，function（）{
var bandeau=document.getElementById（“bandeau”）；
bandeau.addEventListener（'mousemove'，e=>{
bandeau.style.display=“无”；
var elemUnder=document.elementFromPoint（e.clientX，e.clientY）；
bandeau.style.display=“块”；
var stylesUnder=getComputedStyle（elemUnder）；
bandeau.style.cursor=stylesUnder.cursor；
});
bandeau.addEventListener（'click'，e=>{
bandeau.style.display=“无”；
var elemUnder=document.elementFromPoint（e.clientX，e.clientY）；
bandeau.style.display=“块”；
elemUnder.click（）；
});
}，假）
body{margin:0；padding:0；}
.title{字体大小：粗体；右边距：10px；}
.container{边距：0自动；宽度：80%；位置：相对；溢出：隐藏；}
.content{高度：300px；边框：1px实心#c8c8c8；}
导航{背景色：#efebe0；填充：20px；}
按钮{填充：10px；背景色：#9ebf00；边框：1px实心#86a200；边框半径：5px；边距：0 5px 0 5px；光标：指针；}
button.right{float:right；}
#班杜{
位置：绝对位置；
背景：红色无重复滚动0%0%；
宽度：300px；
高度：40px；
z指数：2；
字体大小：30px；
颜色：白色；
字体大小：粗体；
文本对齐：居中；
右：-70px；
变换：旋转（45度）；
顶部：60px；
显示：块；
过渡：0.2秒；
}
#班杜：悬停{
不透明度：0.4；
过渡：0.2秒；
}

假例子
家
定价
联系我们
登录
我会回来的！
在这里阅读更多内容：谢谢，但这并不能解决我的问题，那就是我需要能够在我的元素上反捕获
：hover
事件，但是使用
指针事件
似乎不可能。很好，我非常喜欢这个解决方案！它简单有效。我没有想到那件事。然而，我认为我将使用javascript方法，我将把它描述为一种解决方案