Cannot get the background color to change on mouseover

I'm struggling with getting a section background color to change on mouse over. I'm trying to turn the entire section into a link. Right now, only the elements inside the section become links, not the block itself.

If I remove the <section> prior to the <a> the whole block becomes a link but the background sill does not change on mouse-over. I have an identical scenario in a menu and it works, so I'm a little confused here. I'm also wondering why only the elements turn into links withing a section and it does the opposite in my sub menu. Section code below:

.ch-section {
  position: relative;
  min-height: 140px;
  max-height: 140px;
  width: 400px;
  color: $ch-section-text;
  font-size: 13px;
  border-bottom: 1px solid $body-1px-line;
}
.ch-section a {
  display: block;
  width: 400px;
  text-decoration: none;
}
.ch-section a.active {
  font-weight: bold;
}
.ch-section a:hover:not(.active) {
  background-color: yellow;
  color: $sn-list-link-active;
}

<section class="ch-section">
  <a href="#">
    <span class="ch-section-selected not"></span>
    <img class="ch-section-image" src="assets/images/profileimg2.png" alt="img">
    <span class="ch-section-user">
      <span class="ch-section-status online"></span>
      <span class="ch-section-name">Lindset T. Peters</span>
      <span class="ch-section-location">Location, Province</span>
    </span>
    <time class="ch-section-date">8:48 AM</time>
    <i class="fa fa-e1-message-sent ch-section-message"></i>
    <span class="ch-section-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
  </a>
</section>