JS实现css hover操作的方法示例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JS实现css hover操作的方法示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2001字，纯文字阅读大概需要3分钟。
内容图文
本文实例讲述了JS实现css hover操作的方法。分享给大家供大家参考，具体如下：
hover我们可以用css的方式写，当然，也可以用js的方式写
<html>
<head>
<title>js的下拉菜单效果</title>
<style type="text/css">
*{
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;
}
</style>
</head>
<body>
<header class="header">
<div class="header-center">
<div class="header-mobile" id="headerMobile">
<a href="">移动客户端</a>
<ul class="header-mobile-list" id="mobileList">
<li>新浪微博</li>
<li>新浪新闻</li>
<li>新浪体育</li>
<li>新浪娱乐</li>
<li>新浪财经</li>
<li>天气通</li>
</ul>
</div>
</div>
</header>
</body>
<script type="text/javascript">
//封装选择ID
window.onload=function(){
function $(id){
return document.getElementById(id);
}
//鼠标进
$("headerMobile").onmouseover=function(){
// this.style.display="none";
$("mobileList").style.display="block"
//给当钱的添加样式
this.style.boxShadow=" 0 2px 2px gray"
}
//鼠标出
$("headerMobile").onmouseout=function(){
$("mobileList").style.display="none"
this.style.boxShadow='none'
}
}
</script>
</html>
运行效果图如下：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的JS实现css hover操作的方法示例全部内容，希望文章能够帮你解决JS实现css hover操作的方法示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。