鼠标上的JavaScript过度更改BODY样式.鼠标悬停时反转

JavaScript on MouseOver change BODY style. Reverse on MouseOut

本文关键字：鼠标 样式 悬停 BODY JavaScript      更新时间：2023-09-26

我希望使用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。

如果可以避免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;
}

你也可以检查这个小提琴

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
}
相关文章：