js css 鼠标移入某个区域滑出一个框的效果怎么做?

JavaScript014

js css 鼠标移入某个区域滑出一个框的效果怎么做?,第1张

1、输入代码,其中button是鼠标要滑动的地方,滑过button时,class为content的内容就要显示出来,鼠标滑出去的时候,这块内容就需要重新隐藏起来。

2、把黑色内容的部分初始状态写成隐藏。只需要在class为content里写上display:none,即可。

3、来看下代码和浏览器中的效果。可以看到黑色内容部分已经不见了。

4、把onmouseover和onmouseout两个事件作用在button上面,再写overShow()和overHide()两个 函数。可以看到在函数中通过改content的display属性来实现显示隐藏的效果。

5、在浏览器中就可以看到效果了。

不懂这儿的选中是鼠标点击还是覆盖或者是点击之后的效果,因此就都说一下: 1.被点击时的效果可以用div:active{ css } 2.鼠标覆盖在上面的时候可以用div:hover{ css} 3.点击之后的效果,这个相对前2种有些麻烦,必须用到JS或者jquery,步骤如下: a.先给div添加一个选中的样式比如on{css}; b.然后在js中$('div').click(function{ $('div').toggleClass(' ','on')}) 这是jquery自带的一个方法,点击div切换2个class,