onmouseover 覆盖了 CSS 中的 a:hover

Question

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>

Answer 1

You have a stray </div> tag at the end of the first <a> element which is causing this issue. Removing this will solve the problem. Amended markup:

<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 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>

Answer 2

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>

Answer 3

Remove your onmouseover and onmouseout from HTML and simply add this to CSS

    .image-holder:hover a.cat_cartridge{
        color:#cd1c1f;
        text-decoration:none;
    }

 <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; } .image-holder:hover a.cat_cartridge{ 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 src="http://qa-store.url.com/images/marketing/2016/091616-homepage-icon-mattresses.jpg" style="width:150px;height:150px;" /> </a> <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> </div>