元素如果单击两次将失去悬停属性。

Question

​

var rem = 0;

$('#labrem').on('click', function(){
	if(rem == 0){$(this).css('background', 'white'); rem = 1;}
	else{$(this).css('background', '#eee');	rem = 0;}
});

.labrem{background:#eee;cursor:pointer;}
.labrem:hover{background:white;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='labrem' id='labrem'>remember me</div>

​

首先，鼠标悬停在rem上看-悬停工作.

然后在rem上单击两次鼠标，然后再次将鼠标悬停-鼠标悬停不起作用。

这里有什么神圣的秘密？

Answer 1

这种行为是由使用内联样式引起的。当两次单击元素时，背景将被设置为#eee或white。因为inline styles覆盖css rules，所以:hover永远不会被应用。

为了能够持久化，可以使用white类：

​

$('#labrem').on('click', function(){
	$(this).toggleClass('activated')
});

.labrem{background:#eee;cursor:pointer;}
.labrem:hover{background:white;}

.activated{
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='labrem' id='labrem'>remember me</div>

​

Answer 2

内联样式比类选择器具有更高的优先级(特异性)

当您单击值或rem设置为1时，现在当您第二次单击它到higher条件并将背景设置为#eee时，您不会看到悬停效果，因为内联样式比类选择器具有更高的优先级