Изменение фона блоков при наведении на один из них [требует правки]

219
15 января 2017, 17:57

Здравствуйте. Помогите мне сделать эффект. У меня есть блоки с категориями. При наведении на один из блоков, нужно, что бы у всех остальных остальных блоков, включая на который навели, изменялся фон.

Вот пример, как нужно сделать:

Источник: http://www.veintidosgrados.com/work

И можно ли это как-то сделать только с одним CSS ?

Answer 1

Одним 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

READ ALSO
JQuery откидывает вверх

JQuery откидывает вверх

Есть контейнер, который должен появляться по щелчку на кнопкуНаписал такой код и вроде бы всё отлично, всё работает, но одно "Но"

351
Selectpicker city не обновляется после выбора страны

Selectpicker city не обновляется после выбора страны

Суть проблемы: не обновляются города после выбора страны, остаются старые данные а вот после выбора любого элемента с городов, обновляются...

405
Как выборочно отменять функцию?

Как выборочно отменять функцию?

Как использовать jQ-функцию off чтобы отменить только одну функцию из события? append в данном примере

275
Плагин CSS для Sublime Text 3

Плагин CSS для Sublime Text 3

Здравствуйте! Можно ли как-то сделать в Sublime Text 3, что-бы при написании свойства css в подсказке выдавало список всех возможных значений для...

599