云南农职《JavaScript交互式网页设计》 综合机试试卷④——蔚蓝网导航栏

您好，欢迎光临蔚蓝网！

[登录]

[免费注册]

• 购物车

• |
• 我的账户
• |
• 我的订单
• |
• 礼品卡
• |
• 新手入门
• 购物保障
• 购物流程
• 会员介绍
• 常见问题
• |
• 客户服务

• css：

  *{

  margin: 0;

  padding: 0;

  }

  a{

  color: black;

  text-decoration: none;

  }

  /* 整个导航栏样式 */

  #top{

  width: 100%;

  height: 50px;

  margin: 0 auto;

  line-height: 50px;

  background-color: aqua;

  }

  /* 导航栏左边 */

  .top_left{

  margin-left: 10%;

  float: left;

  }

  .top_left a:hover{

  color: blue;

  }

  /* 导航栏右边 */

  .top_right{

  margin-right: 10%;

  float: right;

  }

  .top_right>ul>li{

  list-style: none;

  float: left;

  margin-left: 15px;

  }

  .top_right img{

  width: 30px ;

  height: 30px ;

  line-height: 50px;

  }

  /* 新手入门,选项 */

  .xsrm{

  display: none;

  text-align: center;

  list-style: none;

  }

  .xsrm li{

  border: solid 1px;

  JS：

  var xsrm_ul = document.getElementById(“xsrm_ul”);

  var xsrm = document.getElementsByClassName(“xsrm”);

  // 鼠标移入事件

  xsrm_ul.onmouseover = function(){

  xsrm[0].style.display=“block”;

  };

  // 鼠标移出时间

  xsrm_ul.onmouseout = function(){

  xsrm[0].style.display=“none”;

  };

  使用jQuery的hover事件实现：

  使用jQuery鼠标移入移出事件：

  完整代码：

  您好，欢迎光临蔚蓝网！

  [登录]

  [免费注册]

• 购物车

• |
• 我的账户
• |
• 我的订单
• |
• 礼品卡
• |
• 新手入门
• 购物保障
• 购物流程
• 会员介绍
• 常见问题
• |
• 客户服务