在点击时保持悬停效果答案

【问题标题】：keep the hover effect on click在点击时保持悬停效果
【发布时间】：2015-05-23 01:55:38
【问题描述】：

当我点击它时，我想保持我的 div 的悬停效果，我该怎么做？有我的代码：我实际上希望我的红色背景的 div 留在悬停的地方当我点击“工作”按钮时

#work_btn{
	position:absolute;
	top:60%;
	left:60px;
	color:grey;
	background: -webkit-linear-gradient(0deg, #ff956c, #ff3644);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	text-align:left;
	z-index:20;	
}


#blank_work{
	position:absolute;
	width: 80px;
	height: 100px;
	margin-top:100px;
	background:red;
	-webkit-transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
	-moz-transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
	transition:all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}



.button_cadre_work:hover #blank_work{
	margin-top:100px;
	margin-left:80px;
}

           	<a href="#"><div class="button_cadre_work"><div id="work_btn">WORKS</div>
            		<div id="blank_work"></div>
               </div></a>

【问题讨论】：

标签： css onclick hover

【解决方案1】：

单击链接时，您需要使用 javascript 来切换类。

然后，您可以像悬停时一样使用活动类设置链接样式。

看到这个小提琴：http://jsfiddle.net/s81yo6s5/

您可以使用此 javascript 在您的 .button_cadre_work 元素上切换 is-active 类：

var button = document.querySelector(".button_cadre_work");

button.addEventListener("click", function(e) {
   this.classList.toggle("is-active"); 
});

然后将其设置为与悬停相同的样式：

.button_cadre_work:hover #blank_work,
.button_cadre_work.is-active #blank_work {
    margin-top:100px;
    margin-left:80px;
}

【讨论】：