文本上的淡化黑色覆盖

Question

我正在尝试在包含文本的 div 上创建透明叠加层。它应该在通过按钮触发时打开和关闭动画。通常你可以在 div 里面创建一个 div 绝对定位和完整 width/height，使用缓动或动画改变不透明度 ().

但是我希望能够select中的文字div。从

更改叠加层

display: block

到

display: none

将打破淡入淡出的动画效果。我如何从方块淡出到 none，这样我就可以重新使用我的底层 div?

Answer 1

你可以像你在问题中提到的那样走不透明之路，只需添加 pointer-events: none; 和 pointer-events: all;。 pointer-events 属性告诉浏览器该元素应该如何对鼠标和触摸交互做出反应，如果你将它设置为 "none" 它只是让事件通过，就像元素甚至不存在一样。更多信息：https://css-tricks.com/almanac/properties/p/pointer-events/

浏览器支持不错（除了 ie<10，但 github 某处有一个 polyfill）http://caniuse.com/#search=pointer-events

$('button').on('click', function(e) {
 e.preventDefault();
  $('.container').toggleClass('overlay-open');
})

.container {
  position: relative;
}

.overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  background-color: black;
  opacity: 0;
  transition: opacity 250ms ease-in-out;
  pointer-events: none;
}

.overlay-open .overlay {
  opacity: 1;
  pointer-events: all;
}

button {
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle Overlay</button>
<div class="container">
  <div class="back">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi ipsam, illum sed dolorum quos modi, quibusdam cum tempora molestias laboriosam voluptas. Fuga corporis earum modi, aut nisi in molestias explicabo voluptatem iure distinctio tempora, iusto doloremque. Inventore culpa eligendi dolore. Expedita, officia, assumenda. Id magnam molestias saepe, cupiditate, architecto autem.
  </div>
  <div class="overlay"></div>
</div>

Answer 2

如果您可以使用 jQuery，这可能就是您要找的：

$(document).ready(function() {
  $("#popupbtn").click(function() {
    $(".overlay").fadeIn(1000);
    $(".overlay").css("display","block");
  });
  $("#close").click(function() {
    $(".overlay").fadeOut(1000);
    //$(".overlay").css("display","none");
  });
});

body,
html {
  margin: 0;
  padding: 0;
 }
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: RGBa(0,0,0,0.5);
  display: none;
}
.popup {
  background: green;
  width: 200px;
  height: 200px;
  display: inherit;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -100px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="popupbtn">click me</button>
<div class="overlay">
  <div class="popup">
    <p>popup text</p>
    <button id="close">close</button>
  </div>
</div>

说明：$(".overlay").fadeIn(1000);完成后，display: blockCSS会进来

希望对您有所帮助！

文本上的淡化黑色覆盖

Fade black overlay on text

css

animation

display