保持点击悬停效果

Question

我想在单击 div 时保持悬停效果，我该怎么做？有我的代码：我实际上希望红色背景的 div 留在悬停位置当我点击 "work" 按钮时

#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>

Answer 1

单击 link 时，您需要使用 javascript 切换 class。

然后，您可以像悬停时一样使用活动 class 设置 link 的样式。

看到这个fiddle：http://jsfiddle.net/s81yo6s5/

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

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;
}

保持点击悬停效果

keep the hover effect on click

css

onclick

hover