Как сделать так, чтоб при наведении на изображение сайт менял прозрачность?

Question

[Vladyslav Talko]

К примеру, сейчас на сайте opacity: 0.8; , а при наведении оно должно меняться на 1.

Comments

[Сергей delphinpro]

img:hover {
  opacity: 1;
}

[Vladyslav Talko]

Сергей: -- , сайт даже не реагирует (

[Сергей delphinpro]

тьфу, блин, сайт..
ну вешайте события на картинку, и при mouseenter добавляйте класс к body, а при mouseleave - убирайте.
соответственно от данного класса и задавайте стили прозрачности.

[Vladyslav Talko]

Сергей: слоожно, но спасибо, сейчас попробую.

[Сергей delphinpro]

с jQuery:

$('img').on('mouseenter', function(){
  $('body').addClass('cls1');
}).on('mouseleave', function(){
  $('body').removeClass('cls1');
})

body { opacity: 0.8; }
body.cls1 { opacity: 1; }

Это сложно? =))

[Vladyslav Talko]

Сергей: уж простите, но я только знакомлюсь с jQuery да и вообще, это мой первый подобный проект )
А можно еще вопрос?

[Vladyslav Talko]

Сергей: и да, с этим тоже не прокатило...

[Сергей delphinpro]

Владислав Персон: Я удивляюсь постоянно с таких как вы!! Свой код не приводят, песочницу не потрудятся скинуть, да еще нагло заявляют - не работает!
Да пиздёжь это - всё работает: https://jsfiddle.net/DelphinPRO/smnwh6xL/

[Vladyslav Talko]

Сергей:
ну вот, первый скрин - результат (навожу, не навожу), второй скрин - код картинки и текста (css и jQuery закинул выше)

[Ksider]

Владислав Персон: это вы код привели? :)

[Vladyslav Talko]

Ksider: нет, показал, как сделал и что вышло

[Ksider]

Владислав Персон: залейте код в песочницу, в том что вы привели нет ничего информативного

[Vladyslav Talko]

Ksider: та ладно ладно, проехали, буду без этого, спасибо вам всем за помощь!

Answer 1

[Vlad Feninets]

var picEl = document.querySelector('.pic')
var siteOpacity = document.body.style.opacity

picEl.addEventListener('mouseover', function() {
	siteOpacity = 0.8
})

picEl.addEventListener('mouseout', function() {
	siteOpacity = 1
})