I have a list of elements belonging to a gallery, where the elements outside the hover will have a new class. The problem occurs when the hover occurs directly from one element to another and does not add the class to the new element in hover.
$(".carousel-gallery-item").hover(
function () {
$(".carousel-gallery-item").each(function (index, el) {
var isHovered = $(el).is(":hover");
if (!isHovered) {
$(el).addClass("carousel-item-hover");
}
});
},
function () {
$(".carousel-gallery-item").each(function (index, el) {
var isHovered = $(el).is(":hover");
if (!isHovered) {
$(el).removeClass("carousel-item-hover");
}
});
});.carousel-gallery-item {
float: left;
padding: 3px;
-webkit-filter: grayscale(0);
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
filter: url("#greyscale");
filter: #808080;
opacity: 1;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.carousel-gallery-item img {
vertical-align: middle;
}
.carousel-item-hover {
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
filter: url("#greyscale");
filter: #808080;
opacity: 0.5;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="carousel-content">
<div class="column-medium-2 column-small-4 column-extra-small-6 carousel-gallery-item" data-id="1">
<img src="https://placeholdit.imgix.net/~text?txtsize=20&bg=b20000&txtclr=ffffff&txt=100%C3%97100&w=100&h=100"class="img-responsive" ondragstart="return false" alt="Foto 1">
</div>
<div class="column-medium-2 column-small-4 column-extra-small-6 carousel-gallery-item" data-id="2">
<img src="https://placeholdit.imgix.net/~text?txtsize=20&bg=b20000&txtclr=ffffff&txt=100%C3%97100&w=100&h=100"class="img-responsive" ondragstart="return false" alt="Foto 2">
</div>
<div class="column-medium-2 column-small-4 column-extra-small-6 carousel-gallery-item" data-id="3">
<img src="https://placeholdit.imgix.net/~text?txtsize=20&bg=b20000&txtclr=ffffff&txt=100%C3%97100&w=100&h=100"class="img-responsive" ondragstart="return false" alt="Foto 3">
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="greyscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0"></feColorMatrix>
</filter>
</svg>
</div>