.main-color:hover .item img {
transition: opacity .3s ease;
}
.main-color:hover .item img.item__img-color {
opacity: 0;
}
/* item, который должен оставаться цветным получает класс active */
.main-color:hover .item img.item__img-color:hover,
.main-color:hover .item.active img.item__img-color {
opacity: 1;
}target-area и применим такой скрит:$(document).on('mouseover mousemove', function (e) {
if ($(e.target).hasClass('target-area')) {
// делаем что-то, если курсор в заданной области
} else {
// делаем что-то, если курсор вне заданной области
}
});$(document).on('mouseover mousemove', function (e) {
if ($(e.target).hasClass('target-area') || $(e.target).parents('.target-area').length) {
// делаем что-то, если курсор в заданной области
} else {
// делаем что-то, если курсор вне заданной области
}
});$(window).on('scroll', function() {
var winScroll = $(window).scrollTop(),
topMargin = 101,
$resultBlock = $('.result');
$('.element.name').each(function() {
var $elemName = $(this),
elemOffset = $elemName.offset().top,
elemText = $elemName.html();
if(elemOffset > winScroll + topMargin) {
$resultBlock.html(elemText);
}
});
});