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

Posted 2023-04-11

功能：使用js制作鼠标移过去会显示隐藏的内容
步骤：
1、构造好页面内容；
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的内容， 参考技术A

步骤：
1、构造好页面内容。

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

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

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

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

参考技术B

那需要那个内容本身是用css里的display:none来隐藏的 比如说是个div吧 加一个鼠标移动事件 

<div style="display:none" onmouseover="this.style.display='block';" onmouseout="this.style.display='none';"></div>

参考技术C 将你要隐藏的内容放在一个容器里，然后指定id 。然后隐藏，至于是display还是别的随意。
找到这个容器对象getElementById（id），
obj.onmouseover = function()
将容器的display设置成block

如果你希望移出的时候还隐藏那你还要写一个移出事件，和移入都差不多 参考技术D onMouseOver鼠标移入事件，设置控件的display
document.getElementById("控件的Id").style.display("none");
onMouseOut鼠标移出事件，设置控件的dispaly
document.getElementById("控件的Id").style.display("block");

鼠标右击时，显示的内容看不到，就是一片空白，把光标移到相应的字体的位子，这时才能显示，是啥原因？

比如右击桌面，显示的是和桌面背景一样的一个格子，然后把鼠标移到
"排列图标”这样才能"排列图标”的字体。

1，你安装的显示驱动不正确，建议您更换新的显示驱动；
2，你安装了某个私人的XP主题，建议恢复到原始的XP主题。 参考技术A 显然是鼠标右键菜单里面文字颜色和菜单颜色一样。你肯定用过主题优化类的东西