Как поменять фон при наведении на ссылку?

Question

[Ainur123]

Как сделать цвет страницы темным body{ background-color:#31708f;} , при наведении курсора на ссылку?
<a class="dark" >Dark</a>

Answer 1

[boga-net]

С помощью CSS не получится, т.к. вы не сможете менять стиль у родителя. Делайте через JS

$('.dark').hover(function() {
    $('body').css({
        'background' : '#31708f'
    });
});

Comments

[Ainur123]

а как сделать плавный переход?

[boga-net]

Ainur123,

body {
    transition: background .3s;
}

.3 - это 0.3 cек. Можете установить своё значение
background - указываем, что обрабатывать. Можно написать просто : .3s - но если указывать к чему нужно применять transition - будет меньше нагрузки на браузер

[Ainur123]

boga-net, разобрался, но после того как навел, фон остается этим же цветом, как сделать чтобы фон опят светлел после того как перестал наводить ?

[boga-net]

Ainur123, не забудьте подключить jQuery

https://jsfiddle.net/bgfg3b4w/

HTML
<a class="dark" >Dark</a>

CSS

body {
    transition: background .3s;
}

.hover-class {
	background: #31708f;
}

jQuery

$('.dark').hover(function() {
    $('body').toggleClass('hover-class');
});

[Ainur123]

boga-net, спасибо,помог!

Answer 2

[Bharata]

css

body {
    transition: background 1s ease-out;
}

javascript

document.querySelector('.dark').addEventListener('mouseover', function(event)
{   
	document.body.style.backgroundColor = '#31708f'
}, false);

Comments

[Ainur123]

цвет фона обратно не возвращается, после того как перестал наводить

[Bharata]

Ainur123, тогда надо дописать:
javascript

document.querySelector('.dark').addEventListener('mouseout', function(event)
{   
  document.body.style.backgroundColor = '#fff'
}, false);