У меня проблемы с простым состоянием наведения 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? Я чувствую, что решение очевидно и находится прямо передо мной, но я не вижу его.
Большое спасибо заранее за ваше время, извините за длинный вопрос:)