JavaScript on MouseOver change BODY style. Reverse on MouseOut

Question

I wish to use JavaScript to apply the style given below to the body of the HTML or another div on mouseover. And reverse on mouseout. Both with a fade if possible?

Style:

.box-style_img2 {
    background-image: url(img.png);
    background-size: auto;
    background-repeat: repeat;
    background-attachment: scroll;
    background-color: #00a0b0;
}

Thanks in advance. P.S. Just beginning to learn Javascript.

Answer 1

It is always better to do things in CSS if you can avoid Javascript

Try using :hover property of css. For animation use transition property

<div class="box-style_img2">    
</div>

.box-style_img2 {
    background-size: auto;
    height: 100px;
    width: 100px;
    background-repeat: repeat;
    background-attachment: scroll;
    background-color: #00a0b0;
    transition: all 1s ease;
}
.box-style_img2:hover {
    background-size: auto;
    height: 100px;
    width: 100px;
    background-repeat: repeat;
    background-attachment: scroll;
    background-color: #000000;
    transition: all 1s ease;
}

Also you can check this fiddle