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

提前致谢。附言刚开始学习 Javascript。

Answer 1

如果可以避免 Javascript，用 CSS 做事总是更好

尝试使用 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 fiddle