＆＃34;指针事件：无＆＃34;在＆＃34;保证金：汽车＆＃34;用过的

Question

我有一个网页，我希望我的内容在页面上居中对齐，每当用户将鼠标悬停在内容之外的页面上时，我希望页面背景能够改变颜色。如果我移过.content div并返回.background div，则应再次更改.background div颜色。

在下面的代码中，如果您将鼠标从content div的底部或顶部移开，效果会非常好。如果您向左或向右移动鼠标content div，则不会触发mouseover事件侦听器。看起来它可能是浏览器的pointer-events实现的错误，或者我做错了。任何帮助将不胜感激。

＆＃13;

＆＃13;

function changeColor(event) {
    event.currentTarget.style.backgroundColor = ('#' + Math.floor(Math.random() * 16777215).toString(16));
}
var el = document.querySelector(".background");
el.addEventListener("mouseover", changeColor, false);
el.addEventListener("click", changeColor, false);

＆＃13;

.content {
    width: 300px;
    margin: auto;
    pointer-events: none;
}
.content > div {
    border: 1px solid black;
    background-color: grey;
    pointer-events: auto;
}
.background {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    z-index: -1;
    background: green
}

＆＃13;

<div class="content">
    <div>
        <p>Proin hendrerit ullamcorper justo in facilisis. Nullam id efficitur neque, id iaculis enim. Duis imperdiet nisl sed vulputate interdum. Vivamus hendrerit nisi dolor, sit amet pellentesque risus vulputate nec. Proin finibus quam iaculis varius egestas. Nunc volutpat mauris at dolor venenatis semper. Phasellus quis vestibulum ante. In ac dolor placerat, dapibus nulla ut, ultrices lorem. Ut elementum ex quis ligula blandit, eu mollis ipsum porta. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras scelerisque, metus ac hendrerit hendrerit, mauris ex cursus neque, in placerat neque risus congue risus. Proin tincidunt, purus efficitur tempor tempus, nisi ex posuere ante, sit amet suscipit quam nisl non risus. Praesent viverra quam viverra arcu faucibus suscipit.</p>               
    </div>
</div>
<div class="background">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这很容易解释。 看看我的截图。 body标记的填充覆盖在.background上方。 如果你在彩色容器内尝试但在填充区域外它可以工作。

编辑：因为填充仍然属于body而你实际上并没有＆＃34;鼠标悬停＆＃34; .background事件未被触发。

Answer 2

因为.content div自动成为块元素，所以内容遍及mouseover左右两侧的整行（100％）：

function changeColor(event) {
    event.currentTarget.style.backgroundColor = ('#' + Math.floor(Math.random() * 16777215).toString(16));
}
var el = document.querySelector(".background");
el.addEventListener("mouseover", changeColor, false);
el.addEventListener("click", changeColor, false);

body {
  pointer-events: none;
}

.content {
  width: 300px;
  margin: auto;
  pointer-events: none;
}

.content>div {
  border: 1px solid black;
  background-color: grey;
  pointer-events: auto;
}

.background {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: -1;
  background: green;
  pointer-events: auto;
}

<div class="content">
    <div>
        <p>Proin hendrerit ullamcorper justo in facilisis. Nullam id efficitur neque, id iaculis enim. Duis imperdiet nisl sed vulputate interdum. Vivamus hendrerit nisi dolor, sit amet pellentesque risus vulputate nec. Proin finibus quam iaculis varius egestas. Nunc volutpat mauris at dolor venenatis semper. Phasellus quis vestibulum ante. In ac dolor placerat, dapibus nulla ut, ultrices lorem. Ut elementum ex quis ligula blandit, eu mollis ipsum porta. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras scelerisque, metus ac hendrerit hendrerit, mauris ex cursus neque, in placerat neque risus congue risus. Proin tincidunt, purus efficitur tempor tempus, nisi ex posuere ante, sit amet suscipit quam nisl non risus. Praesent viverra quam viverra arcu faucibus suscipit.</p>               
    </div>
</div>
<div class="background">
</div>