Здравствуйте. Помогите мне сделать эффект. У меня есть блоки с категориями. При наведении на один из блоков, нужно, что бы у всех остальных остальных блоков, включая на который навели, изменялся фон.
Вот пример, как нужно сделать:
Источник: http://www.veintidosgrados.com/work
И можно ли это как-то сделать только с одним CSS
?
Одним CSS
вряд ли. Но предлагаю такое гибкое решение. Вы можете добавлять сколько угодно пунктов, но картинка будет нормально отображаться:
var items = document.querySelectorAll('.wallpaper__item');
items.forEach(function(item) {
item.addEventListener("mouseover", function() {
var bg_n = this.getAttribute('class').replace(/^.*wallpaper\_{2}item\_bg\-{2}(\d+).*$/, '$1');
document.querySelector('.wallpaper').classList.add('wallpaper_bg--'+bg_n);
var bg_i = document.createElement('div');
bg_i.setAttribute('class', 'wallpaper__item-bg wallpaper__item-bg_img--'+bg_n);
for(var i = 0; i < items.length; i++){
(function(i) {
var item__bg = bg_i.cloneNode(true);
item__bg.style.backgroundSize = (100 * items.length) + '% 100%';
item__bg.style.backgroundPositionX = '-' + (100 * i) + '%';
items[i].appendChild(item__bg);
item__bg.classList.add('wallpaper__item-bg_show');
setTimeout(function() {
item__bg.classList.remove('wallpaper__item-bg_show');
}, 500);
})(i);
};
});
item.addEventListener("mouseout", function() {
var bg_n = this.getAttribute('class').replace(/^.*wallpaper\_{2}item\_bg\-{2}(\d+).*$/, '$1');
document.querySelector('.wallpaper').classList.remove('wallpaper_bg--'+bg_n);
items.forEach(function(item) {
var items__bg = item.querySelectorAll('.wallpaper__item-bg');
for(var i = 0; i < items__bg.length; i++){
(function(i) {
items__bg[i].classList.add('wallpaper__item-bg_hide');
setTimeout(function() {
if(items__bg.length > 0 && items__bg[i].parentNode){
item.removeChild(items__bg[i]);
};
}, 500);
})(i);
};
});
});
});
.wallpaper {
display: flex;
position: relative;
width: 100%;
}
.wallpaper__item {
position: relative;
height: 400px;
margin: 10px;
background-color: black;
flex: 1;
cursor: pointer;
}
.wallpaper__item-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
/* Появление/исчезновение */
.wallpaper__item-bg.wallpaper__item-bg_show {
opacity: 0;
animation: show 0.5s linear forwards;
}
@keyframes show {
from {opacity: 0}
to {opacity: 1}
}
.wallpaper__item-bg.wallpaper__item-bg_hide {
opacity: 1;
animation: hide 0.5s linear forwards;
}
@keyframes hide {
from {opacity: 1}
to {opacity: 0}
}
/* Анимация качания */
.wallpaper__item:nth-child(2n+2) {
animation: size__type0 10s infinite;
}
.wallpaper__item:nth-child(2n+1) {
animation: size__type1 10s infinite;
}
@keyframes size__type0 {
from {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
to {
transform: scale(1);
}
}
@keyframes size__type1 {
from {
transform: scale(1.05);
}
50% {
transform: scale(1);
}
to {
transform: scale(1.05);
}
}
.wallpaper__item-bg_img--0 {background-image: url('http://wp.widewallpapers.ru/2k/nature/forest/1920x1200/forest-wallpaper-1920x1200-004.jpg')}
.wallpaper__item-bg_img--1 {background-image: url('http://www.anawalls.com/repic/image.php?src=http://www.anawalls.com/images/nature/sea-surface-calm-smooth-surface-light-night.jpg&h=540&w=960')}
.wallpaper__item-bg_img--2 {background-image: url('http://www.ellf.ru/uploads/posts/2015-07/1437948968_001-ellf.ru.jpg')}
.wallpaper__item-bg_img--3 {background-image: url('http://www.sunhome.ru/i/wallpapers/134/oboi-na-rabochii-stol-gorod.orig.jpg')}
.wallpaper__item-bg_img--4 {background-image: url('http://anywalls.com/pic/201210/1366x768/anywalls.com-14971.jpg')}
<div class="wallpaper">
<div class="wallpaper__item wallpaper__item_bg--0"></div>
<div class="wallpaper__item wallpaper__item_bg--1"></div>
<div class="wallpaper__item wallpaper__item_bg--2"></div>
<div class="wallpaper__item wallpaper__item_bg--3"></div>
<div class="wallpaper__item wallpaper__item_bg--4"></div>
</div>
Пример на стороннем редакторе: jsfiddle.net-sct48ty9
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Есть контейнер, который должен появляться по щелчку на кнопкуНаписал такой код и вроде бы всё отлично, всё работает, но одно "Но"
Суть проблемы: не обновляются города после выбора страны, остаются старые данные а вот после выбора любого элемента с городов, обновляются...
Как использовать jQ-функцию off чтобы отменить только одну функцию из события? append в данном примере
Здравствуйте! Можно ли как-то сделать в Sublime Text 3, что-бы при написании свойства css в подсказке выдавало список всех возможных значений для...