本文实例讲述了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程序设计有所帮助。