CSS :hover not working on element with dynamically added class

Question

在 Dom 准备好后，我检测鼠标是否移动并将“has-hover”类附加到父 div。

里面有两个标签。第一个将其悬停状态附加到其父 div 的“has-hover”类，这是我想要实现的功能。

第二个标签直接附加了悬停状态。

为什么悬停状态在第二个标签上起作用，但在第一个标签上不起作用？？

谢谢!

function watchForHover() {
	var div = $(".div");
  var hasHoverClass = false;

	function enableHover() {
  	if (hasHoverClass) return;
		div.addClass("has-hover");
		hasHoverClass = true;
	};
  
	document.addEventListener("mousemove", enableHover, true);
};

watchForHover();

label {
  width: 70px;
  height: 70px;
  margin: 5px;
  color: white;
  background-color: red;
  transition: all 0.3s;
  display: block;
}
.has-hover {
  label:first-child:hover {
    opacity: 0.5;
  }
}
label:nth-child(2):hover {
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<label>label 1</label>
<label>label 2</label>
</div>

Answer 1

你不能在 CSS 中嵌套规则。如果您不想这样做，则必须使用像 SASS 这样的预处理器。

function watchForHover() {
	var div = $(".div");
  var hasHoverClass = false;

	function enableHover() {
  	if (hasHoverClass) return;
		div.addClass("has-hover");
		hasHoverClass = true;
	};
  
	document.addEventListener("mousemove", enableHover, true);
};

watchForHover();

label {
  width: 70px;
  height: 70px;
  margin: 5px;
  color: white;
  background-color: red;
  transition: all 0.3s;
  display: block;
}
.has-hover label:first-child:hover {
    opacity: 0.5;
  }
label:nth-child(2):hover {
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<label>label 1</label>
<label>label 2</label>
</div>