Good afternoon, I am working with flex-grow
. I would like that as I enter each of the modules, it takes a flex-grow of 10 and all the others are set to 3, until I enter another one, it remains at 10.
In my head is to add a class in which I enter and delete it at the same time in the others, but I can't do it
$(document).on('mouseenter', '.pafe-image-accordion__item', function() {
//console.log("entra");
$( this ).addClass( "acordeon10" );
$(".pafe-image-accordion__item").removeClass( "acordeon10" );
});
.pafe-image-accordion {
display: -ms-flexbox;
display: flex;
height: 500px;
border-radius: 15px;
overflow: hidden;
height: 702px;
border-radius: 0px 0px 0px 0px;
padding: 20px;
}
.pafe-image-accordion__item {
transition-duration: .5s;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-preferred-size: 0;
flex-basis: 0;
font-family: Roboto,sans-serif;
position: relative;
}
.pafe-image-accordion__item>img {
max-width: 100%;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
position: absolute;
top: 0;
left: 0;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%!important;
}
.acordeon3 {
flex-grow: 3;
box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
}
.acordeon10 {
flex-grow: 10;
box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<section class="bannerLocalizaciones">
<div class="pafe-image-accordion">
<div class="pafe-image-accordion__item acordeon3">
<img src="http://rustic.klondigital.com/wp-content/uploads/2022/02/AmberleyCastle-3.jpg" alt="">
</div>
<div class="pafe-image-accordion__item acordeon10">
<img src="http://rustic.klondigital.com/wp-content/uploads/2022/02/AmberleyCastle-3.jpg" alt="">
</div>
<div class="pafe-image-accordion__item acordeon3">
<img src="http://rustic.klondigital.com/wp-content/uploads/2022/02/AmberleyCastle-3.jpg" alt="">
</div>
<div class="pafe-image-accordion__item acordeon3">
<img src="http://rustic.klondigital.com/wp-content/uploads/2022/02/AmberleyCastle-3.jpg" alt="">
</div>
<div class="pafe-image-accordion__item acordeon3">
<img src="http://rustic.klondigital.com/wp-content/uploads/2022/02/AmberleyCastle-3.jpg" alt="">
</div>
</div>
</section>
The problem is your order, first you add the class to the div it enters, and then you remove the class from all divs that have it. If you first remove the class from all divs that have it, and then add the class to the div that is on onHover, it works fine.