前端之家收集整理的这篇文章主要介绍了
js鼠标点击图片切换效果实现代码,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
本文实例讲述了js鼠标点击图片切换效果实现代码。分享给大家供大家参考。具体如下:
运行效果截图如下:
具体代码如下:
li > a{
float:left;
width:265px;
height:50px;
margin-top:450px;
text-align:center;
line-height:50px;
color:#ddd;
background-color:#333;
letter-spacing:1px;
cursor:pointer;
text-decoration:none;
text-shadow:0px 0px 1px #fff;
}
ul.menu > li ul{
list-style:none;
float:left;
margin-top:-180px;
width:100%;
height:110px;
padding-top:20px;
background-repeat:no-repeat;
background-color:transparent;
}
ul.menu > li ul li{
display:none;
}
ul.menu > li ul.sub1 {
background-image: url('../img/bg1sub.png');
}
ul.menu > li ul.sub2 {
background-image: url('../img/bg2sub.png');
}
ul.menu > li ul.sub3{
background-image:url(../img/bg3sub.png);
}
ul.menu > li ul li a{
color:#fff;
text-decoration:none;
line-height:30px;
margin-left:20px;
text-shadow:1px 1px 1px #444;
font-size:11px;
}
ul.menu > li ul li a:hover{
border-bottom:1px dotted #fff;
}
ul.menu > li ul.sub1 li{
display:block;
}