在文本上淡出黑色覆蓋

我試圖在包含文本的div上創建透明覆蓋。通過按鈕觸發時，它應該開啓和關閉動畫。通常情況下，您可以在該div內創建一個具有絕對定位和全寬/高度的div，使用輕鬆或動畫更改不透明度（Black transparent overlay on image）。在文本上淡出黑色覆蓋

但我希望能夠選擇div中的文本。從

display: block

更改疊加

display: none

將打破褪色動畫。我該如何淡入淡出，所以我可以重新使用我的底下div？

來源

2017-06-12 Cake

歡迎來到StackOverflow，你的問題應該包含一個[**最小，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve）。另外，請澄清一下。 _「重新使用我的底層div」是什麼意思？_如果你從一個按鈕觸發動畫，爲什麼你需要使用'display'？爲什麼不動畫「不透明」工作？ – hungerstar

你可以像你在你的問題中提到的不透明的道路，只是添加指針事件：無;和指針事件：所有; https://css-tricks.com/almanac/properties/p/pointer-events/ –

如果你可以使用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: block CSS會在

希望這有助於！

來源

2017-06-12 15:42:39 Chesswithsean

是的。這解決了它，謝謝！ – Cake

你可以像你在你的問題中提到的不透明的道路，只需添加pointer-events: none;和pointer-events: all;。 pointer-events屬性告訴瀏覽器該元素應該如何對鼠標和觸摸交互作出反應，如果你將它設置爲「none」，它只是讓事件通過，就像元素甚至不在那裏一樣。更多信息：https://css-tricks.com/almanac/properties/p/pointer-events/

的瀏覽器支持是體面的（除即< 10，但在GitHub上的一個填充工具的地方）http://caniuse.com/#search=pointer-events

$('button').on('click', function(e) { 
 
\t 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>

來源

2017-06-12 15:33:01

在文本上淡出黑色覆蓋

回答

相關問題