CSS指针事件：允许悬停时不提供

Question

我正在尝试创建一个top元素，我的页面可以悬浮。悬停时，我想更改元素的不透明度并允许单击。

问题是，当我添加pointer-events: none以允许点击进入时，我的悬停永远不会触发，这毕竟是逻辑。我虽然可以使用javascript处理它，但是事件mouseover或mouseenter与pointer-events: none不兼容。

这是我的仅包含CSS的示例：如果添加pointer-events: none;，它将不起作用。元素是红色横幅

，我希望能够单击下面的按钮，同时能够降低其不透明度。

body {margin:0; padding:0;}
.title {font-weight:bold;margin-right:10px;}
.container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
.content {height:300px;border: 1px solid #c8c8c8;}
nav {background-color:#efebe0;padding:20px;}
button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;}
button.right {float:right;}

.bandeau {
  position: absolute; 
  background: red none repeat scroll 0% 0%; 
  width: 300px; 
  height: 40px; 
  z-index: 2; 
  font-size: 30px; 
  color: white; 
  font-weight: bold; 
  text-align: center; 
  right: -70px; 
  transform: rotate(45deg); 
  top: 60px; 
  display: block;
  transition: 0.2s ease-in-out;
  pointer-events:none;
}

.bandeau:hover {
  opacity: 0.4;
}
<div class="container">
  <nav>
    <span class="title">Dummy Example</span>
    <button>Home</button>
    <button>Pricing</button>
    <button class="right">Contact us</button>
    <button class="right">Log in</button>
  </nav>
  <div class="content"></div>
  <div class="bandeau">
    <span>I will be back !</span>
  </div>
</div>

带有javascript的另一个示例：

document.addEventListener('DOMContentLoaded', function() {
  var bandeau = document.getElementById("bandeau");
  bandeau.addEventListener('mouseenter', e => {
    bandeau.style.opacity = '0.4';
    bandeau.style.pointerEvents = 'none';
  });
  bandeau.addEventListener('mouseleave', e => {
    bandeau.style.opacity = '1';
    bandeau.style.pointerEvents = 'auto';
  });
}, false);
body {margin:0; padding:0;}
.title {font-weight:bold;margin-right:10px;}
.container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
.content {height:300px;border: 1px solid #c8c8c8;}
nav {background-color:#efebe0;padding:20px;}
button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;}
button.right {float:right;}

#bandeau {
  position: absolute; 
  background: red none repeat scroll 0% 0%; 
  width: 300px; 
  height: 40px; 
  z-index: 2; 
  font-size: 30px; 
  color: white; 
  font-weight: bold; 
  text-align: center; 
  right: -70px; 
  transform: rotate(45deg); 
  top: 60px; 
  display: block;
  transition: 0.2s ease-in-out;
}
<div class="container">
  <nav>
    <span class="title">Dummy Example</span>
    <button>Home</button>
    <button>Pricing</button>
    <button class="right">Contact us</button>
    <button class="right">Log in</button>
  </nav>
  <div class="content"></div>
  <div id="bandeau">
    <span>I will be back !</span>
  </div>
</div>

有没有办法做到这一点或不可能？

谢谢

我正在尝试创建一个top元素，我的页面可以悬浮。悬停时，我想更改元素的不透明度并允许单击。问题是当我添加指针事件时：none ...

Answer 1

在您的示例中，您可以轻松地将鼠标悬停在整个导航元素上，例如

Answer 2

我根据@yanca链接的thread的注释找到了解决方案。我使用document.elementFromPoint根据横幅下方的元素来检查应该显示的光标（指针或自动）。然后，我重新使用document.elementFromPoint来传递点击通过