javascript - MouseOver 上的 JavaScript 更改 BODY 样式。在 MouseOut 上反转

Question

我希望使用 JavaScript 将style下面给出的应用于bodyHTML 或其他div. mouseover并反转mouseout。如果可能，两者都带有淡入淡出？

风格：

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

提前致谢。PS刚开始学习Javascript。

Answer 1

如果您可以避免使用 Javascript，最好在 CSS 中做事

尝试使用:hovercss 的属性。对于动画使用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;
}

你也可以检查这个小提琴

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
}