javascript - onmouseover 覆盖了 :hover in CSS

Question

背景:我不确定发生了什么，但我有一个链接在 CSS 中关联了一个 a:hover。我还有一个图像，当用户滚动相同的文本链接时，它也应该改变颜色。如果用户首先将鼠标悬停在链接文本上，它会改变颜色没问题。但是一旦他们将鼠标悬停在图像上它仍然会改变颜色但鼠标悬停在文本上不再有效。

问题:与 onmouseover/onmouseout 关联的 JavaScript 能否取消 CSS a:hover 效果？

代码概述如下:

    <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

你有一只流浪猫</div>第一个末尾的标记 <a>导致此问题的元素。删除它可以解决问题。修改后的标记:

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