Denoteone Denoteone - 2 months ago 15
CSS Question

onmouseover is overridding a:hover in CSS

Background: I am not sure what is going on, but I have a link that has an

a:hover
associated with it in the CSS. I also have an image that when the user rolls over that same link of text should also change color. If the user mouses over the link text first it changes color no problem. but as soon as they mouse over the image it still changes colors but the mouse over the text no longer works.

Question: Could the JavaScript associated with the
onmouseover
/
onmouseout
cancel out the CSS
a:hover
effect?

Code outlined below:

<style type="text/css">
a.cat_cartridge{
text-decoration:none;
color:#e77504;
font:bold 12px arial;
}

a.cat_cartridge:hover {
color:#cd1c1f;
text-decoration:none;
}
</style>

<div class="image-holder" style="width:150px;margin:0px auto;">
<a href="http://dev-store.url.com/product/serta-gel-king-title-/p810093914?pos=1:14&amp;Ntt=Mattresses">
<img onmouseout="document.getElementById('mattresses_link').style.color='#e77504';" onmouseover="document.getElementById('mattresses_link').style.color='#cd1c1f';" src="http://qa-store.url.com/images/marketing/2016/091616-homepage-icon-mattresses.jpg" style="width:150px;height:150px;" />
</a>
</div>

<div class="bottom-copy">
<h3 style="text-align:center;">
<a class="cat_cartridge" href="http://dev-store.url.com/product/serta-gel-king-title-/p810093914?pos=1:14&amp;Ntt=Mattresses" id="mattresses_link">Mattresses</a>
</h3>
</div>

leo leo
Answer

Could the JavaScript associated with the onmouseover/onmouseout cancel out the CSS a:hover effect?

Yes

$( "div" ).mouseover(function() {
   // uncomment and run again to see how mouseover overrides hover
  // $("div").css({ 'background-color' : 'white'})
});
div {
  width: 300px;
  height: 400px;
  background-color: red;
  
}

div:hover {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>

Comments