Question

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

SELECT Customer.Cust_ID, Customer.Cust_Name, Customer.Env_Lines,
FROM Customer
INNER JOIN Delay
ON Customer.Cust_ID=$system.Cust_ID
WHERE Customer.Cust_Name = '$customer';

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

Answer 1

点击链接时，您需要使用javascript来切换课程。

然后，您将使用与悬停相同的方式为活动类设置链接的样式。

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

您可以使用此JavaScript来切换is-active元素上的.button_cadre_work课程：

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

保持点击悬停效果

1 个答案: