Chrome box-shadow 过渡怪异

Question

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

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

但在谷歌浏览器中它的工作方式很奇怪：

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

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

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

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

如您所见，在 Google Chrome 中它无法正常工作。 我该如何解决这个问题？

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", "")
  })
});

使用mouseenter 和mouseleave 代替hover。

对于响应式anchor 标签，使用$(this).width(); 即时获取宽度

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