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

html-css012

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

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

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

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

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

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

先使用DOM获取要修改的元素

例如

<div class="test"></div>

<script>

let element=document.querySelector("test")

//单独修改,注意ccs中间的杠去掉,改成驼峰命名:

element.style.borderLeft="1px solid red"

element.style.borderRight="1px solid red"

//或者使用 .style.cssText 属性同时修改:

elment.style.cssText="border-left:1px solid redborder-right:1px solid red"

</script>