js修改css hover样式,JS实现css hover操作的方法示例

JS实现css hover操作的方法示例

发布时间：2020-09-01 14:46:32

来源：脚本之家

阅读：118

作者：谢玉胜

本文实例讲述了JS实现css hover操作的方法。分享给大家供大家参考，具体如下：

hover我们可以用css的方式写，当然，也可以用js的方式写

js的下拉菜单效果

*{

padding:0px;

margin:0px;

}

ul li{

list-style: none;

}

a{

text-decoration: none

}

.header{

height: 45px;

background-color:#FBFBFB;

border-bottom: 1px solid #C7C7C7;

}

.header-center{

width: 1000px;

height: 100%;

margin: 0 auto;

position: relative;

}

.header-mobile{

width: 130px;

position: absolute;

top:0;

right: 0;

text-align: center;

}

/* .header-mobile:hover .header-mobile-list{

display: block;

}*/

.header-mobile a{

display: block;

height: 45px;

line-height: 45px;

color:#000000;

}

.header-mobile-list{

display: none;

background:url(bg.png) no-repeat;

background-position: 20px 18px;

}

.header-mobile-list li{

height: 45px;

border-bottom: 1px dashed gray;

font-family: '微软雅黑';

line-height: 50px;

padding-left: 35px;

padding-top: 5px;

}

移动客户端

• 新浪微博
• 新浪新闻
• 新浪体育
• 新浪娱乐
• 新浪财经
• 天气通

//封装选择ID

window.οnlοad=function(){

function $(id){

return document.getElementById(id);

}

//鼠标进

$("headerMobile").οnmοuseοver=function(){

// this.style.display="none";

$("mobileList").style.display="block"

//给当钱的添加样式

this.style.boxShadow=" 0 2px 2px gray"

}

//鼠标出

$("headerMobile").οnmοuseοut=function(){

$("mobileList").style.display="none"

this.style.boxShadow='none'

}

}

运行效果图如下：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。