CSS change hyperlinks colour on hover of a DIV

I have a problem with getting hyperlinks to change color properties with the DIV on hover.

I want a white div with the links being #80c8ac. The on hover the div becomes #80c8ac and the links #fff. The text is to remain #152128.

My issue that I can't overcome is that the text changes to #fff on the hover state and the links become #fff in the first state

here's the HTML

.job.hot {
  color: #152128;
  background-color: #fff;
  padding: 20px;
  width: 30%;
  float: left;
  margin: 0 15px 0 20px;
}
#ja-jobs-widget a {
  color: #80c8ac;
}
#ja-jobs-widget summary {
  color: #80c8ac;
}
.job.hot:hover {
  background-color: #00D9BD;
}
.job.hot:hover,
#ja-jobs-widget {
  color: #152128;
}
.job.hot:hover,
#ja-jobs-widget a {
  color: #fff;
}

<div class="ja-job-list-container">
  <div class="ja-job-list">
    <div class="job hot">
      <h2 class="title"><a data-job-id="507911" href="#" title="Front End Developer">Front End Developer</a></h2> 
      <div class="meta">
        <ul class="classifications">
          <li data-id="16813">IT &amp; Telecomms</li>
          <li data-id="16814">Web / Multimedia Developer</li>
          <li data-id="16815">Sydney</li>
          <li data-id="16816">Permanent / Full Time</li>
        </ul>
        <p class="date-posted">12/6/2016</p>
      </div>
      <p class="summary">This is an outstanding opportunity for a Front End Developer to join this highly skilled team.</p>
      <a class="view-details" data-job-id="507911" href="#" title="More..">More..</a> 
    </div>
  </div>

The issue described above is caused by the

.job.hot:hover, #ja-jobs-widget a {
    color: #fff;
}

I've tried lots of combinations including trying to directly specify classes like 'title' & 'view-details'