javascript - 停止传播不工作 Jquery

Question

大家好，当我进入我的一个 div 时，我应该将其边框设为黑色来指示它，但即使我使用停止传播，它也会为所有父 div 添加边框。有没有办法让我的悬停只适用于子 div？当我添加边框时，我的 div 正在改变它的位置？？

$('div').hover(function(e) {
  e.stopPropagation();

});

function run() {

  var div = document.createElement("div");
  div.style.backgroundColor = "green"; //create new div
  div.style.height = "100%";
  div.style.width = "50%";
  div.style.left = "0.1%";
  div.addEventListener("click", run); //bind click to new div
  this.appendChild(div);

  var div = document.createElement("div");
  div.style.backgroundColor = "red"; //create new div
  div.style.height = "100%";
  div.style.position = "relative";
  div.style.height = "100%";
  div.style.width = "49.8%";
  div.style.left = "50.1%";
  div.style.top = "-100%";


  div.addEventListener("click", run); //bind click to new div
  this.appendChild(div);

  this.removeEventListener("click", run); //remove the original click event

}
document.getElementById("start").addEventListener("click", run); //bind the initial click event

html,
body {
  height: 100%;
}
div#start {
  border: 1px solid black;
  width: 500px;
  height: 30px;
}
div:hover {
  border: 2px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="start" width='400px' height='30px'></div>

Answer 1

如评论中所述，https://api.jquery.com/event.stoppropagation/只影响事件本身，不与 css 交互。

event.stopPropagation()

Returns:

Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

处理程序是事件处理程序，例如 https://api.jquery.com/hover/ , 不要与像 ':hover', ':link', ':active', ect ( http://www.w3schools.com/css/css_link.asp )

这样的 css 伪代码混淆

相反，请重新考虑您的 CSS 并在规则上使用更大的特异性或什至“!important”后缀以阻止它被覆盖。

此外，使用 jquery $.hover (https://api.jquery.com/hover/) 可以动态应用不需要复杂 css 映射的类。