CSS：悬停不使用动态添加类的元素

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

Yon无法在CSS中嵌套规则。如果你不这样做，你将不得不使用像SASS这样的预处理器。

＆＃13;

＆＃13;

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();

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;