onmouseover 在 CSS 中覆盖 a:hover答案

【问题标题】：onmouseover is overridding a:hover in CSSonmouseover 在 CSS 中覆盖 a:hover
【发布时间】：2016-12-14 20:42:54
【问题描述】：

背景：我不确定发生了什么，但我有一个链接，在 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>

【问题讨论】：

为什么要使用脚本悬停？
你弄明白了吗？看看我下面的sn-p。

标签： javascript html css

【解决方案1】：

您在第一个 <a> 元素的末尾有一个杂散的 </div> 标记，导致此问题。删除它将解决问题。修改后的标记：

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

【讨论】：

抱歉，我更新了我的代码，但我遗漏了一个
。接得好。谢谢。
啊好吧，没问题！

【解决方案2】：

JavaScript 可以与 onmouseover/onmouseout 关联吗？取消 CSS a:hover 效果？

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>

【讨论】：

虽然在您的示例中是正确的，但 OP 同时存在 mosueover 和 mouseout 功能。通过将 OP 已经拥有的内容添加到您的代码中，不会出现任何问题。 $( "div" ).mouseout(function() { $("div").css({ 'background-color' : 'red'}) });

【解决方案3】：

从 HTML 中删除您的 onmouseover 和 onmouseout 并将其添加到 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>

【讨论】：