html5网页导航栏特效,HTML5如何制作特效导航栏？

最新推荐文章于 2022-09-24 16:31:36 发布

sky9029

最新推荐文章于 2022-09-24 16:31:36 发布

阅读量644

点赞数

文章标签： html5网页导航栏特效

本文介绍了如何使用HTML、CSS和JavaScript实现鼠标悬停时，列表项li元素的大小、背景色、文字颜色等属性动态改变。通过CSS选择器和JavaScript事件监听，为每个li元素添加了鼠标移入和移出时的响应效果。

摘要由CSDN通过智能技术生成

鼠标移上去时，改变li元素的大小、背景色、文字颜色等代码如下：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">ul{margin:0;padding:0;}ulli{list-style:none;width:130px;height:50px;text-align:center;line-height:50px;font-size:20px;position:relative;margin-left:10px;}div{width:150px;height:500px;border:1pxdashed#000000;text-align:center;}.active{background-color:green;color:#fff;}.show{width:2px;height:20px;position:absolute;left:10px;top:15px;background-color:white;}.li1{left:20px;border-radius:5px;}</style></head><body><divid="div1"><ul><li><span></span>雅望天堂1</li><li><span></span>雅望天堂2</li><li><span></span>雅望天堂3</li><li><span></span>雅望天堂4</li></ul></div><scripttype="text/javascript">varoLi=document.getElementsByTagName("li");varoSpan=document.getElementsByTagName("span");for(vari=0;i<oLi.length;i++){oLi[i].οnmοuseοver=function(){varsp=this.childNodes[0];console.log(sp);for(vari=0;i<oLi.length;i++){oLi[i].setAttribute("class","");oSpan[i].setAttribute("class","");}this.setAttribute("class","activeli1");sp.setAttribute("class","show");}oLi[i].οnmοuseοut=function(){for(vari=0;i<oLi.length;i++){oLi[i].setAttribute("class","");}}}</script></body></html>这应该是你要的效果

阅读全文 >