js中鼠标滑过背景变色

一、js中鼠标滑过背景变色

1、在很多网页中我们都看到当鼠标滑过一个内容时，这个内容的背景会改变颜色。设置鼠标滑过背景变色只需用到:hover即可设置成功。

2、语法: div:hover{background-color: red;}

3、在html文件上找到body标签，在这个标签里创建一个div标签并设置class类为bg。如图：代码：div class="bg"/div

4、在title标签后创建style标签用来给bg类添加样式。在这给bg类设置了一个宽、高和背景颜色。如图代码： style type="text/css".bg{ width: 150px; height: 150px; background-color: red;}/style

5、设置鼠标滑过div时背景变色。给bg样式类添加鼠标滑过：hover，然后设置鼠标滑过时的背景颜色。如图代码：.bg:hover{ background-color: burlywood;}

6、实用浏览器打开。保存好html后使用浏览器打开，在鼠标没有滑过div时背景是红色的，当鼠标滑过div的时候背景从红色变为了棕色。、

7、所有代码，可把所有代码直接复制到新家的html文件上，保存好后用浏览器打开即可看到效果。如图：所有代码：!DOCTYPE html html head meta charset="UTF-8" title鼠标滑过背景变色/title style type="text/css".bg{ width: 150px; height: 150px; background-color: red;}.bg:hover{ background-color: burlywood;}/style/head body div class="bg"/div/body/html

二、js怎么做鼠标移过去会显示隐藏的内容

功能：使用js制作鼠标移过去会显示隐藏的内容

2、在css中设置一个隐藏类hide，类的样式为display：none；设置显示类show，样式为display：block；

3、给需要隐藏的内容设置类名为hide，这样就隐藏了控件

4、在js标签中，通过控件的类名或者id获取到隐藏对象obhide以及需要监控的对象ob2，再对ob2对象设置onmouseover方法，在这个方法中，将bohide的类名hide更换成show，这样，在鼠标进入ob2控件之中，就会显示隐藏的obhide的内容，

对ob2对象设置onmouseout方法，在这个方法中，将bohide的类名show更换成hide，这样，在鼠标离开ob2控件，就会隐藏obhide的内容，

三、关于js的鼠标移入移出事件

1、在JavaScript中，处理鼠标移入和移出事件主要使用onmouseenter、onmouseover、onmouseleave和onmouseout属性。具体代码如下：

2、为id为"selectModal"的元素绑定鼠标移入事件：

3、document.getElementById("selectModal").onmouseenter= function(){

4、document.getElementById("selectModal").onmouseleave= function(){

5、在处理鼠标移出效果时，若遇到嵌套div结构的问题，即鼠标似乎误触发了移出事件，可以通过以下方法解决：

6、当存在多层div嵌套时，直接使用onmouseover和onmouseout可能频繁触发事件。为避免误触发，推荐使用onmouseenter和onmouseleave。

7、mouseover与mouseenter：鼠标移动至被选元素或其子元素时，mouseover会触发；而mouseenter仅在移动至被选元素时触发。

8、mouseout与mouseleave：鼠标离开被选元素或任何子元素时，mouseout会触发；mouseleave则只在离开被选元素时触发。

9、因此，使用onmouseenter和onmouseleave可以有效避免嵌套div结构中出现的误触发问题，提供更准确的事件监听效果。