Question

我希望使用JavaScript将下面给出的style应用于HTML的body或div上的其他mouseover。并在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小提琴

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 inline

，你可以使用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
}

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

2 个答案: