How to change the background color when you hover over a link?

How to make the color dark page body{ background-color:#31708f;} , mouseover the link?
<a class="dark">Dark</a>
June 5th 19 at 21:45
2 answers
June 5th 19 at 21:47
Solution
Using CSS will not work, because you will not be able to change the style of the parent. Do it via JS

$('.dark').hover(function() {
$('body').css({
 'background' : '#31708f'
});
});
how to make a smooth transition? - Laney_Nicolas commented on June 5th 19 at 21:50
,
body {
 transition: background .3s;
}


.3 is 0.3 sec. Can set its value
background - specify that processing. You can write simply : .3s - but if you specify what you want to apply transition - there will be less load on the browser - Frederick.Gislason40 commented on June 5th 19 at 21:53
understood , but once restored, the background remains the same color, how to make a background of honey brightened after he ceased to direct ? - Laney_Nicolas commented on June 5th 19 at 21:56
don't forget to include 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');
});
- Frederick.Gislason40 commented on June 5th 19 at 21:59
thanks , helped! - Laney_Nicolas commented on June 5th 19 at 22:02
June 5th 19 at 21:49
css
body {
 transition: background 1s ease-out;
}


javascript
document.querySelector('.dark').addEventListener('mouseover', function(event)
{ 
 document.body.style.backgroundColor = '#31708f'
}, false);
the background color will not be returned, after it failed to keep - Laney_Nicolas commented on June 5th 19 at 21:52
, then we have to add:
javascript
document.querySelector('.dark').addEventListener('mouseout', function(event)
{ 
 document.body.style.backgroundColor = '#fff'
}, false);
- Frederick.Gislason40 commented on June 5th 19 at 21:55

Find more questions by tags CSSHTMLJavaScript