jquery - Chrome 框阴影过渡怪异

Question

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

在此 gif 中，它在 Firefox 中正常工作:

但在 Google Chrome 中，它的工作方式很奇怪:

在我的主题中，每个类别都有一种颜色。首先，我将该颜色应用到 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"));