鼠标点击和类的显示、隐藏

《鼠标点击和类的显示、隐藏》
开发工具和关键技术：Adobe Dreamweaver CC 2017、鼠标点击和类的显示、隐藏
撰写时间：2019年1月17日
今天，和大家分享的技术是鼠标点击和类的显示、隐藏。
下面，我举个例子来说明一下。
这个例子最初的代码和在浏览器的效果的截图如下：


在“dsbutn”按钮和“dchm”按钮之间，我再添加一个类名为bdzs的类。这个类把“dchm”类挤压到下面，破坏“dchm”类的CSS的布局。
代码和在浏览器的效果的截图如下：


如图所示，bdzs类会把“dchm”类的内容挤压了，要想“dchm”类不受影响，就要给“dchm”类添加z-index和绝对定位（一般都两个一起用）。给它添加层级关系。“dchm”类就会在bdzs类的上面而不会挤压到bdzs类。
代码和在浏览器的效果的截图如下：


当我们想点击按钮隐藏bdzs类时，先要在js上声明两个按钮的ID。然后在两个按钮添加鼠标的点击事件和隐藏和显示的事件。就可以实现点击按钮时，隐藏和显示bdzs类。
代码和在浏览器的效果的截图如下：