添加悬停:之后与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>

我想要实现的效果是将鼠标悬停在任何元素上，并让整个 .listdiv 优雅地向左移动。因为我想将效果应用于父级，所以我决定使用 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 中的一个项目。所以我的问题是：有没有办法添加 hover：after css 以防止我的 jquery 函数闪烁？我觉得解决方案很明显，就在我面前，但我看不到它。

提前非常感谢您的时间，抱歉:)长问题

Answer 1

你只能使用 jQuery 内联 css 应用。:before或after无法设置内联。

然而

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

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

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