在元素上的火悬停事件，同时在它后面的元素上保持点击事件

Question

基本上，我希望能够在#content的下三分之一处移动时更改#bar的颜色，由#trigger（绿色矩形）表示，同时仍然可以在#content上触发mousedown事件，但是如果没有一些javascript帮助，pointer-events:none;无法做到这两点。

content.addEventListener("mousedown", function() { //For click&drag
  content.classList.toggle("red");
  content.classList.toggle("gray");
});

#main {
  background-color: black;
  position: relative;
  text-align: center;
}
#content {
  width: 400px;
  height: 300px;
  margin: auto;
}
#trigger {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  border: 2px green solid;
}
#bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  background-color: purple;
  transition: background-color 0.3s ease;
}
#trigger:hover #bar {
  /*Won't fire because of pointer-events:none*/
  background-color: blue;
}
.red {
  border: 2px red solid;
}
.gray {
  border: 2px gray solid;
}

<div id="main">
  <div id="content" class="red"></div>
  <div id="trigger">
    <div id="bar"></div>
  </div>
</div>

有没有办法用css实现这样的事情，还是我坚持使用javascript？

Javascript解决方案（#trigger仅供展示）：

content.addEventListener("mousedown", function() { //For click&drag
  content.classList.toggle("red");
  content.classList.toggle("gray");
});
main.addEventListener("mousemove", function(event) {
  var mainBounds = main.getBoundingClientRect();
  if (event.pageY > (mainBounds.height / 10) * 7) bar.classList.add("blue");
  else bar.classList.remove("blue");
});

#main {
  background-color: black;
  position: relative;
  text-align: center;
  color:white;
}
#content {
  width: 400px;
  height: 300px;
  margin: auto;
}
#trigger {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  border: 2px green solid;
}
#bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
}
.red {
  border: 2px red solid;
}
.gray {
  border: 2px gray solid;
}
.purple {
  background-color: purple;
  transition: background-color 0.3s ease;
}
.blue {
  background-color: blue;
}

<div id="main">
  <div id="content" class="red"></div>
  <div id="trigger">
    <div id="bar" class="purple"></div>
  </div>
</div>