want to access and override this specific a:hover value
<p>I have the following markup:</p>

<pre><code>&lt;div class="nav-font  nav-item-3"&gt;
    &lt;a href="/arc/place" class="top_nav"&gt;favorite places&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>and would like to target the link color for favorite places. I have the following jquery:</p>

<pre><code>$('.nav-font').on('mouseover',function(){
  //console.log('here i am');
  $(this).addClass('light-color');
});
</code></pre>

<p>but it doesn't overrride the a:hover. How would I more specifically set the value here?</p>

<p>thx</p>

<p>update #1:</p>

<p>here's sample css (doing one or the other). I thought the first would be more 'specific' but the standard a:hover that I have is still taking precedence. Appreciate the help!</p>

<pre><code>.light-class a:hover{
  color: #f5e9d1;
}

.light-class{
  color: #f5e9d1;
}
</code></pre>
