MouseOver上的JavaScript改變了BODY風格。在MouseOut上反轉

Question

我希望使用JavaScript將以下給出的style應用於HTML的body或mouseover上的另一div。並在mouseout上反轉。如果可能，兩者都會褪色？

風格：

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

在此先感謝。 P.S.剛開始學習Javascript。

Answer 1

它始終是更好地做事情CSS如果你能避免使用Javascript

嘗試使用CSS的:hover財產。對於動畫使用transition財產

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

你也可以檢查this小提琴

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

你的HTML：

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

或者，如果你不想寫javascript直列可以使用的addEventListener

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

注意：這個任務也可以用普通的css來完成。

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