新創建的psuedo元素上的CSS過渡

Question

我想在偽元素上創建淡入淡出效果，但由於無法在此元素上使用JavaScript而遇到困難。

我有一個與我在此處嘗試執行的操作類似的示例，但由於元素創建時過渡似乎不起作用，因此我無法使元素淡入。

https://codepen.io/anon/pen/wrxPXJ

.hoverhere.dim::before {
    content: '\A';
    position: absolute;
    width: 100%; 
    height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.8);
    opacity: 1;
    transition: opacity 1s;
 }

我將一個類添加到div中，以便在與上述CSS匹配之后創建偽元素，但是無法確定如何對此進行動畫處理。

我可能可以在沒有如下偽元素的情況下使其正常工作：

https://codepen.io/anon/pen/Oxwzvv

但是，我想知道是否有一種方法可以不更改我的標記來包含一個空的div。

Answer 1

我想你是說要這個嗎？

 $('.hoverhere') .mouseenter(function() { $(this).addClass('dim'); }) .mouseleave(function() { $(this).removeClass('dim'); }); 

 .hoverhere { width: 100%; height: 40px; background: red; color: white; text-align: center; } .hoverhere::before { content: '\\A'; position: absolute; width: 20%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; transition: all 1s ease-out; } .hoverhere.dim::before { opacity: 1; visibility: visible; transition: opacity 1s ease-out; } 

 <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <p>RANDOM TEXT HERE</p> <div class="hoverhere">HOVER ON ME</div> <p>MORE RANDOM TEXT HERE</p> 

它需要為opacity確定一個起點。

---

如果這僅是用於懸停，則根本不需要JS。

 .hoverhere { width: 100%; height: 40px; background: red; color: white; text-align: center; } .hoverhere::before { content: '\\A'; position: absolute; width: 20%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; transition: all 1s ease-out; } .hoverhere:hover::before { opacity: 1; visibility: visible; transition: opacity 1s ease-out; } 

 <p>RANDOM TEXT HERE</p> <div class="hoverhere">HOVER ON ME</div> <p>MORE RANDOM TEXT HERE</p>