Fire hover event on element while keeping click event on the element behind it

Question

Basically, I want to be able to change the color of #bar when hovering over the lower third of #content, represented by #trigger (green rectangle), while still being able to fire the mousedown event on #content, but with pointer-events:none; can't do both without some JavaScript help.

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>

Is there a way to achieve such thing with CSS or am I stuck with JavaScript?

JavaScript solution (#trigger is there just for show):

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>