轉換jQuery addClass和removeClass

Question

我試圖實現覆蓋divs時，我徘徊他們。 基本上我在mouseover上添加了一個類並刪除了mouseleave上的類。 問題是我無法進行轉換，因爲該類的主要效果屬於：僞元素之後。 實際上，我瞄準了placeholderclass股利稱爲.IMG目標

CSS

.img-overlay{ 
height: 100% 
width: 100% 
transition: all 1s ease; 
} 

.img-overlay::after{ 
content:""; 
    display: block; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background-color: rgba(0, 0, 0, .3); 
    transition: all 1s ease; 
} 

jQuery的

$(window).ready(function() { 

$(".img-target").mouseover(function() { 
    $(this).addClass('img-overlay',1000); 

}); 

$(".img-target").mouseleave(function() { 
    $(this).removeClass("img-overlay"); 

}); 
}); 

我已經嘗試轉變適用於：後到.img目標，但似乎沒有任何工作。 任何想法？ :)

P.S.不幸的是使用僞元素後，實際上是覆蓋主題結構的唯一方式。

Answer 1

你的問題是:after僞元素沒有初始狀態

$(window).ready(function() { 
 
    $(".img-target").mouseover(function() { 
 
    $(this).addClass('img-overlay', 1000); 
 

 
    }); 
 

 
    $(".img-target").mouseleave(function() { 
 
    $(this).removeClass("img-overlay"); 
 

 
    }); 
 
});

.img-target { 
 
    position: relative; 
 
    background-color: gold; 
 
    height: 50px; 
 
    width: 50px; 
 
    transition: all 1s ease; 
 
} 
 
.img-target::after { 
 
    content: ""; 
 
    display: block; 
 
    transition: all 1s ease; 
 
} 
 
.img-overlay::after { 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    background-color: rgba(0, 0, 0, .3); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="img-target"></div>

，如果你只使用jQuery在鼠標和我們的檢測，你可以使用CSS代替.img-target:hover::after {...}：

.img-target { 
 
    position: relative; 
 
    background-color: gold; 
 
    height: 50px; 
 
    width: 50px; 
 
    transition: all 1s ease; 
 
} 
 
.img-target::after { 
 
    content: ""; 
 
    display: block; 
 
    transition: all 1s ease; 
 
} 
 
.img-target:hover::after { 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    background-color: rgba(0, 0, 0, .3); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="img-target"></div>