Question

嗨，大家好，当我进入我的一个div时，我应该指示它的边框是黑色的，但即使我使用了stoppropagation，它也会添加所有父div的边框。有没有办法让我的悬停只是为了孩子div？当我添加边框时，我的div正在改变它的位置？

＆＃13;

$('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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

<强> event.stopPropagation（）

返回：

描述：防止事件冒泡DOM树，防止任何父处理程序被通知事件。

处理程序是事件处理程序，例如https://api.jquery.com/hover/，不要与css伪代码混淆，例如employeeSegmentedControl = UISegmentedControl(items: items) employeeSegmentedControl.selectedSegmentIndex = 0 employeeSegmentedControl.backgroundColor = UIColor(red: 41/255, green: 128/255, blue: 185/255, alpha: 1.0) employeeSegmentedControl.tintColor = UIColor.whiteColor() employeeSegmentedControl.addTarget(self, action: Selector("indexChanged:"), forControlEvents: .ValueChanged) self.view.addSubview(employeeSegmentedControl) employeeSegmentedControl.setTranslatesAutoresizingMaskIntoConstraints(false) self.view.addConstraint(NSLayoutConstraint(item: employeeSegmentedControl, attribute: .Width, relatedBy: .Equal, toItem: self.view, attribute: .Width, multiplier: 1.0, constant: 0.0)) self.view.addConstraint(NSLayoutConstraint(item: employeeSegmentedControl, attribute: .Height, relatedBy: .Equal, toItem: self.searchController.searchBar, attribute: .Height, multiplier: 1.0, constant: 0.0)) self.view.addConstraint(NSLayoutConstraint(item: employeeSegmentedControl, attribute: .CenterX, relatedBy: .Equal, toItem: self.view, attribute: .CenterX, multiplier: 1.0, constant: 0.0)) self.view.addConstraint(NSLayoutConstraint(item: employeeSegmentedControl, attribute: .CenterY, relatedBy: .Equal, toItem: self.searchController.searchBar, attribute: .CenterY, multiplier: 1.2, constant: 0.0))，ect（http://www.w3schools.com/css/css_link.asp）

相反，重新考虑你的css，并在规则上使用更大的特殊性甚至'！important'后缀来阻止它被覆盖。

此外，使用jquery $ .hover（https://api.jquery.com/hover/）对于动态应用不需要复杂的css映射的类非常有用。

Answer 2

你不应该用javascript做任何事情。所需要的只是CSS。

只需将:hover选择器添加到要更改边框的div即可。由于所有父div也同时悬停，因此您需要创建一个不会影响这些div的选择器。将类似hover-sensitive的类添加到要设置边框的div，并在选择器中使用

div.hover-sensitive:hover {
    border: 2px solid black;
}

<强>更新

要不使边框移动div，请使用css属性outline而不是border。它的语法与border相同。

停止传播不工作Jquery

2 个答案: