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>

Answer 2

JavaScript与onmouseover/onmouseout相关联吗？取消CSS a：悬停效果？

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

从HTML中移除onmouseover和onmouseout，然后将其添加到CSS

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

＆＃13;

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

＆＃13;

onmouseover覆盖a：hover in CSS

3 个答案: