添加悬停：使用 jquery 之后？

Question

我发现自己在使用简单的 css+jquery 悬停状态时遇到了问题。我有一个元素列表：

<div class="list">
  <div class="one">
    <span><h1>element oneA</h1></span>
  </div>
  <div class="two">
    <span><h1>element two</h1></span>
  </div>
  <div class="three">
    <span><h1>element three</h1></span>
  </div>
  <div class="four">
    <span><h1>element four</h1></span>
  </div>
  <div class="five">
    <span><h1>element five</h1></span>
  </div>

</div>

我想要实现的效果是将鼠标悬停在任何元素上，并让整个 .list div 优雅地向左移动。因为我想将效果应用到父级，所以我决定使用 jquery 而不是简单的 css。效果如何：

$(document).ready(function(){
    $(".one, .two, .three, .four, .five").hover(
    function(){ $('.list').addClass("Mydivadd")},
    function(){ $('.list').removeClass('Mydivadd')}
  );
});

（我添加的类是位置的变化）。问题是这个选项导致了很多强烈的闪烁。所以我做了一些谷歌搜索，我遇到了这个漂亮的平滑过渡，显然适应了我的定位需求：

.list .one
{
  transition: ease all 0.5s;
  width: 100%;
}

.list .one:hover
{
  position: relative;
  transform: translateX(-20rem);
}
.lists .one:hover:after
{
  content: "";
  width: calc(100% + 20rem);
  position: absolute;
  right: -20rem;
}

效果很好，但显然只适用于大 div 中的一项。所以我的问题是：有什么方法可以添加悬停：在 css 之后防止闪烁到我的 jquery 函数？我觉得解决方案很明显，就在我面前，但我看不到。

非常感谢您抽出宝贵的时间，很抱歉这个问题很长:)

Answer 1

您只能使用 jQuery 应用内联 css。 :before 或 after 不能设置内联。

然而，

如果要将其添加到所有项目，请执行以下操作：

.lists>div:hover{...}
.lists>div:hover:after{...}

或者为所有项目添加一个公共类，并在css中将.one替换为该类