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>