javascript - 无法使用 CSS 聚焦在框中

Question

我尝试将 :active 函数添加到 div，希望在悬停效果消失后强制它保持相同的颜色。当他们点击该框时，该框应保持该颜色，当他们再次点击时，颜色恢复正常。

问题是，尽管单击了该框，但它仍会变回其原始颜色。

我需要 Javascript 吗？

.faqOuter{
	color: #878787;
	background-color: #E7E7E7;
	transition: all 0.3s ease;
	
	font-family: "Raleway", Sans-Serif;
	font-weight: 500;
	text-align: center;
	font-size: 20px !important;
	
	height: 30px;
	
	padding: 4px 0 5px 0;
	
	position: absolute !important;
	z-index: 1;

}

.faqOuter:hover{
	color: #fff;
	background-color: #262626;
}

.faqOuter:active{
	color: #fff;
	background-color: #262626;
}

   <h4 class="faqOuter col-md-8 col-md-offset-2">Trial One Bar</h4>

Answer 1

您需要为此使用脚本并在每次点击时切换样式以获得效果。

首先添加一个具有所需样式的类，并在每次点击时使用它进行切换，如下所示。

.hover-change {
    color: #fff;
    background-color: #262626;
}

$('.faqOuter').on('click', function(){
    $(this).toggleClass('hover-change');
});