JavaScript sur MouseOver changer le style BODY. Reverse sur MouseOut

Question

Je souhaite utiliser JavaScript pour appliquer le style donné ci-dessous au body du HTML ou un autre sur mouseover. Et inverser sur mouseout. Les deux avec un fondu si possible?

Style:

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

Merci à l'avance. P.S. Je commence juste à apprendre le Javascript.

Answer 1

Il est toujours préférable de faire les choses en CSS si vous pouvez éviter Javascript

Essayez d'utiliser :hover propriété de css. Pour une utilisation d'animation transition propriété

<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; 
} 

vous pouvez également consulter this violon

Answer 2

function on_mouseover(){ 
document.body.className += "your-class-to be applied";//for body 
or 
document.getElementById("div-id").className ="your-class-to be applied" 
} 

function on_mouseout(){ 
document.body.className += "your-initial-css-class";//for body 
or 
document.getElementById("div-id").className ="your-initial-css-class"; 
} 

Votre HTML:

<div id="div-id" onmouseover="on_mouseover()" onmouseout="on_mouseout()"></div> 

Ou vous pouvez utiliser addEventListener si vous ne voulez pas écrire javascript ligne

document.getElementById('your-id').addEventListener("mouseover",on_mouseover); 
document.getElementById('your-id').addEventListener("mouseout",on_mouseout); 

Remarque: Cette tâche peut également être effectuée à l'aide de css simple également.

.your-class{ 
//properties to be applied on mouseout 
} 
.your-class:hover{ 
//properties to be applied on mouseover 
}