这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现 CSS hover 操作的方法, 涉及 javascript 事件响应及页面元素 css 属性动态操作相关技巧, 需要的朋友可以参考下
本文实例讲述了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0707/334233.html