Chrome框阴影过渡怪异

Question

我在Google Chrome上遇到了box-shadow问题。

在这个gif中，它在Firefox中正常工作：

但是在谷歌浏览器中它很奇怪：

在我的主题中，每个类别都有一种颜色。 首先，我将这种颜色应用于li border-left，就像这样

<a style="border-left:4px solid '.$color.';" ...

当悬停类别为li时，我将带有box-shadow的边框左侧颜色应用于我的jquery代码：

$(document).ready(function() {
    $('.side-category ul li a').hover(function() {
        $(this).css("box-shadow", "inset 200px 0 0 0 " + $(this).css("border-left-color"))
    }, function() {
        $(this).css("box-shadow", "")
    })
});

来自页面来源的Html代码：

<ul>
    <li><i class="fa fa-wordpress"></i><a style="border-left:4px solid #9b59b6;" href="http://localhost/demos/kisiselblog/category/wordpress/">Wordpress</a><span class="cat-count" style="background: #9b59b6;display:block;">12</span></li>
    <li><i class="fa fa-dot-circle-o"></i><a style="border-left:4px solid #3498db;" href="http://localhost/demos/kisiselblog/blog/">Blog</a><span class="cat-count" style="background: #3498db;display:none;"></span></li>
    <li><i class="fa fa-times"></i><a style="border-left:4px solid #060166;" href="http://localhost/demos/kisiselblog/category/no-show/">No show</a><span class="cat-count" style="background: #060166;display:block;">2</span></li>
</ul>

如您所见，在谷歌浏览器中，它无法正常工作。 我该如何解决这个问题？

Answer 1

试试这个

$(document).ready(function() {
  $('.side-category ul li a').mouseenter(function() {
    $(this).css("box-shadow", "inset 200px 0 0 0 " + $(this).css("border-left-color"))
  });

  $('.side-category ul li a').mouseleave(function() {
    $(this).css("box-shadow", "")
  })
});

而不是hover使用mouseenter＆amp; mouseleave。

对于自适应anchor代码，请使用$(this).width();

动态获取宽度

$(this).css("box-shadow", "inset "+ $(this).width() + "px 0 0 0 " + $(this).css("border-left-color"));