project
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微星中国</title>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./dist/css/swiper.min.css">
  <link rel="stylesheet" href="css/indexn.css">
  <link rel="stylesheet" href="css/common.css">
  <script src="./dist/js/swiper.min.js"></script>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/indexn.js"></script>
  <style>
     .wth {
            width: 0%!important;
        }
        /* .wft {
            width: 100%!important;
        } */
        .top_nav > ul > li > .table_goods > .goods_left > ul > li > ol > li > a {
            padding: 0!important;
            border: none!important;
        }
        .menu_box > ul > li > span > ul > li > a {
            text-decoration: none!important;
            color: rgb(121, 121, 121)!important;
        }
        .menu_box > ul > li > a {
            text-decoration: none!important;
            color: rgb(121, 121, 121)!important;
        }
  </style>
</head>

<body>
  <!-- 头部 -->
  <header>
    <div class="top">
        <!-- 大盒子包裹 -->
        <div class="top_left  hidden-sm hidden-xs"></div>
        <div class="top_nav  hidden-sm hidden-xs ">
            <ul>
                <li>
                    <a href="#">产品资讯</a>
                    <div class="table_goods">
                        <!-- <div class="goods_box"> -->
                            <div class="goods_left">
                                <ul>
                                    <li>
                                        笔记本电脑
                                        <ol>
                                            <li><a href="list.html">泰坦GT系列</a></li>
                                            <li>绝影GS系列</li>
                                            <li>强袭GE系列</li>
                                            <li>侠客GF系列</li>
                                            <li>先锋Alpha</li>
                                        </ol>
                                    </li>
                                    <li>
                                        台式电脑
                                        <ol>
                                            <li>Aegis系列</li>
                                            <li>Nightblade系列</li>
                                            <li>Infinite系列</li>
                                            <li>Trident系列</li>
                                            <li>CodeX系列</li>
                                        </ol>
                                    </li>
                                    <li>
                                        电脑显卡
                                        <ol>
                                            <li>MEG系列</li>
                                            <li>MPG系列</li>
                                            <li>MAG系列</li>
                                            <li>Pro系列</li>
                                            <li>NVA系列</li>
                                        </ol>
                                    </li>
                                    <li>
                                        电脑主板
                                        <ol>
                                            <li>MEG系列</li>
                                            <li>MPG系列</li>
                                            <li>MAG系列</li>
                                            <li>Pro系列</li>
                                            <li>NVA系列</li>
                                        </ol>
                                    </li>
                                    <li>
                                        显示器
                                        <ol>
                                            <li>MPG系列</li>
                                            <li>MAG系列</li>
                                            <li>PAG系列</li>
                                            <li>Creator系列</li>
                                            <li>Prestige系列</li>
                                        </ol>
                                    </li>
                                </ul>
                            </div>
                            <div class="goods_center"></div>
                            <div class="goods_right">
                                <div class="mac">
                                    <div class="mac_box"></div>
                                </div>
                                <div class="pc">
                                    <div class="pc_box"></div>
                                </div>
                                <div class="socket">
                                    <div class="socket_box"></div>
                                </div>
                                <div class="cpu">
                                    <div class="cpu_box"></div>
                                </div>
                                <div class="display">
                                    <div class="display_box"></div>
                                </div>
                            </div>
                        <!-- </div> -->
                    </div>
                </li>
                <li>
                    <a href="characteristic.html">勇者系列</a>
                    <div class="table_list">
                        <div class="list_box"></div>
                    </div>
                </li>
                <li>
                    <a href="active.html">活动&促销</a>
                    <div class="table_active">
                       <div class="active_box"></div>
                    </div>
                </li>
                <li>
                    <a href="main.html">内容创造</a>
                    <div class="table_main">
                        <div class="main_box"></div>
                    </div>
                </li>
                <li>
                    <a href="service.html">客户服务</a>
                </li>
                <li>
                    <a href="news.html">新闻</a>
                </li>
            </ul>
        </div>
        <!-- 小屏下隐藏以上两个盒子，显示下边两个盒子 -->
        <div class="tops_left visible-sm visible-xs">
            <a href="#" class="glyphicon glyphicon-align-justify"></a>
            <a href="#" class="glyphicon glyphicon-remove" style="display:none;"></a>
        </div>
        <div class="tops_logo visible-sm visible-xs">
            <a href="index.html"></a>
        </div>
        <div class="click_menu">
           <div class="menu_box">
            <ul>
                <li>
                    <em>产品资讯</em>
                    <!-- <em>返回</em> -->
                    <span>
                        <em>返回</em>
                        <ul>
                            <li>
                                <a href="list.html">笔记本电脑</a>
                            </li>
                            <li>台式电脑</li>
                            <li>电脑显卡</li>
                            <li>电脑主板</li>
                            <li>显示器</li>
                        </ul>
                    </span>
                </li>
                <li>
                    <em>勇者系列</em>
                    <span>
                        <em>返回</em>
                        <ul>
                            <li>
                                <a href="characteristic.html">勇者系列</a>
                            </li>
                        </ul>
                    </span>
                </li>
                <li>
                    <em>活动&促销</em>
                    <span>
                        <em>返回</em>
                        <ul>
                            <li>
                                <a href="active.html">活动</a>
                            </li>
                            <li>促销</li>
                        </ul>
                    </span>
                </li>
                <li>
                    <em>内容创造</em>
                    <span>
                        <em>返回</em>
                        <ul>
                            <li>
                                <a href="main.html">内容</a>
                            </li>
                            <li>创造</li>
                        </ul>
                    </span>
                </li>
                <li>
                    <a href="service.html">客户服务</a>
                </li>
                <li>
                    <a href="news.html">新闻</a>
                </li>
            </ul>
           </div>
        </div>
        <div class="top_right">
            <ul>
                <li><a href="login.html"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
    </div>
</header>
 <div class="main">
    <!-- 焦点图部分 -->
  <article id="homepage" class="pageBg ">
    <div class="section">
      <div class="content ">
        <div class="swiper-container row">
          <div class="swiper-wrapper col-xs-12">
            <div class="swiper-slide"><img src="upload/banner_1.png" alt=""></div>
            <div class="swiper-slide"><img src="upload/banner_2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="upload/banner_3.jpg" alt=""></div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
        <script>
          var swiper = new Swiper('.swiper-container', {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
              delay: 2500,
              disableOnInteraction: false,
            },
            pagination: {
              el: '.swiper-pagination',
              clickable: true,
            },
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
          });
        </script>
      </div>
    </div>
  </article>
  <!-- new-nav部分 -->
  <section class="news-nav">
    <div class="content">
      <div class="row">
        <div class="col-xs-12">
          <dl>
            <dt>通知</dt>
            <dd>
              <a href="#">
                产品别 服务项目 联系方式 工作时间 笔记本/主板/显卡/主机箱/显示器 400全国热线服务 拨打全国热线支持号码：400-828-85...
              </a>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </section>
  <!-- 点卡部分 -->
  <div id="HeroProducts" class="section">
    <div class="content">
      <div class="basic row">
        <div class="bs-col col-lg-3 col-xs-12">
          <a href="#" class="card">
            <div class="card-header">
              <h3>B550赠Steam点卡</h3>
              <p></p>
            </div>
            <div class="card-body colorBG-black">
              <div class="HeroBG"></div>
              <div class="card-img">
                <img src="./upload/HeroBG1.jpg" alt="">
              </div>
              <img src="./upload/HeroBG.png" alt="">
            </div>
          </a>
        </div>

        <div class="bs-col col-lg-3 col-xs-12">
          <a href="#" class="card">
            <div class="card-header">
              <h3>MGA电竞赛</h3>
              <p></p>
            </div>
            <div class="card-body colorBG-black">
              <div class="HeroBG"></div>
              <div class="card-img">
                <img src="./upload/HeroBG2.jpg" alt="">
              </div>
              <img src="./upload/HeroBG.png" alt="">
            </div>
          </a>
        </div>

        <div class="bs-col col-lg-3 col-xs-12">
          <a href="#" class="card">
            <div class="card-header">
              <h3>RTX30 SERIES</h3>
              <p></p>
            </div>
            <div class="card-body colorBG-black">
              <div class="HeroBG"></div>
              <div class="card-img">
                <img src="./upload/HeroBG3.jpg" alt="">
              </div>
              <img src="./upload/HeroBG.png" alt="">
            </div>
          </a>
        </div>

        <div class="bs-col col-lg-3 col-xs-12">
          <a href="#" class="card">
            <div class="card-header">
              <h3>3080 Gaming & Blizzard</h3>
              <p></p>
            </div>
            <div class="card-body colorBG-black">
              <div class="HeroBG"></div>
              <div class="card-img">
                <img src="./upload/HeroBG4.jpg" alt="">
              </div>
              <img src="./upload/HeroBG.png" alt="">
            </div>
          </a>
        </div>

      </div>
    </div>
  </div>
  </div>
  </div>
  </div>
  </div>
  <!-- LongTermPromotions部分 -->
  <div id="promotions" class="section">
    <div class="content">
      <div class="basic row">
        <div class="bs-col col-md-12 hidden-sm hidden-xs">
          <a href="#">
            <img src="./upload/banner_4.jpg" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- ProductsSupport开始了 -->
  <div id="ProductsSupport" class="section">
    <div class="content">
      <div class="basic row">
        <div class="bs-col col-md-6 col-xs-12">
          <a href="#" class="link-area">
            <div class="subheadline">
              <div class="subHeadline-img">
                <span class="icon-style-bg icon_poductRegistration"></span>
              </div>
              <div class="font_card">
                <span class="fc-title">微星会员 / 产品注册</span>
                <span class="fc-intro">To enjoy a host of benefits, promotions and events</span>
              </div>
            </div>
            <div class="HeroBG"></div>
            <div class="bg_img bg_img1"></div>
          </a>
        </div>
        <div class="bs-col col-md-6 col-xs-12">
          <a href="#" class="link-area">
            <div class="subheadline">
              <div class="subHeadline-img">
                <span class="icon-style-bg icon_Support"></span>
              </div>
              <div class="font_card">
                <span class="fc-title">技术支持</span>
                <span class="fc-intro">为您量身定做专属服务！</span>
              </div>
            </div>
            <div class="HeroBG"></div>
            <div class="bg_img bg_img2"></div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- BranRelated开始了 -->
  <div id="BranRelated" class="section">
    <div class="content">
      <div class="basic row">
        <div class="bs-col col-md-3 hidden-sm hidden-xs">
          <a href="#" class="link-area">
            <div class="subheadline">
              <div class="font_card">
                <span class="fc-title">微星论坛</span>
              </div>
            </div>
            <div class="HeroBG"></div>
            <div class="link-area-img">
              <img src="upload/BrandRelated_1.jpg" alt="">
            </div>
          </a>
        </div>
        <div class="bs-col col-md-3 hidden-sm hidden-xs">
          <a href="#" class="link-area">
            <div class="subheadline">
              <div class="font_card">
                <span class="fc-title">MSI Reward Program</span>
              </div>
            </div>
            <div class="HeroBG"></div>
            <div class="link-area-img">
              <img src="upload/Rewards_2.jpg" alt="">
            </div>
          </a>
        </div>
        <div class="bs-col col-md-3 hidden-sm hidden-xs">
          <a href="#" class="link-area">
            <div class="subheadline">
              <div class="font_card">
                <span class="fc-title">影音中心</span>
              </div>
            </div>
            <div class="HeroBG"></div>
            <div class="link-area-img">
              <img src="upload/BrandRelated_4.webp" alt="">
            </div>
          </a>
        </div>
        <div class="bs-col col-md-3 hidden-sm hidden-xs">
          <a href="#" class="link-area">
            <div class="subheadline">
              <div class="font_card">
                <span class="fc-title">MSI Insider</span>
              </div>
            </div>
            <div class="HeroBG"></div>
            <div class="link-area-img">
              <img src="upload/BrandRelated_5.jpg" alt="">
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
 </div>
  <!-- 底部 -->
  <footer>
    <!-- 底部上部分 -->
    <div class="footer_top hidden-xs">
        <ol>
            <li>
                <h2>社区</h2>
                <ul>
                    <li><a href="#">微星论坛</a></li>
                    <li><a href="#">部落格</a></li>
                    <li><a href="#">媒体平台</a></li>
                    <li><a href="#">影音中心</a></li>
                    <li><a href="#">电竞战队</a></li>
                    <li><a href="#">星光班论坛</a></li>
                    <li><a href="#">Customer Studies</a></li>
                </ul>
            </li>
            <li>
                <h2>技术支持</h2>
                <ul>
                    <li><a href="#">大客户服务</a></li>
                    <li><a href="#">下载中心</a></li>
                    <li><a href="#">会员中心</a></li>
                    <li><a href="#">在线客服</a></li>
                    <li><a href="#">授权代理</a></li>
                    <li><a href="#">服务站点</a></li>
                    <li><a href="#">保修条款</a></li>
                    <li><a href="#">增值服务</a></li>
                </ul>
            </li>
            <li>
                <h2>新闻</h2>
                <ul>
                    <li><a href="#">新闻</a></li>
                    <li><a href="#">获奖荣誉</a></li>

                </ul>
            </li>
            <li>
                <h2>媒体</h2>
                <ul>
                    <li><a href="#">产品目录</a></li>
                    <li><a href="#">壁纸下载</a></li>
                    <li><a href="#">MSI App</a></li>

                </ul>
            </li>
            <li>
                <h2>关于微星</h2>
                <ul>
                    <li><a href="#">微星简介</a></li>
                    <li><a href="#">品牌故事</a></li>
                    <li><a href="#">品质认证</a></li>
                    <li><a href="#">品质标准</a></li>

                </ul>
            </li>
        </ol>
    </div>
    <!-- 底部上部分小屏显示 -->
    <div class="footers_top visible-xs">
        <ul>
            <li>
                社区
                <dl>
                    <dd>微星论坛</dd>
                    <dd>部落格</dd>
                    <dd>媒体平台</dd>
                    <dd>影音中心</dd>
                    <dd>电竞战队</dd>
                    <dd>星光班论坛</dd>
                    <dd>Customer Studies</dd>
                </dl>
            </li>
            <li>
                技术支持
                <dl>
                    <dd>大客户服务</dd>
                    <dd>下载中心</dd>
                    <dd>会员中心</dd>
                    <dd>在线客服</dd>
                    <dd>授权代理</dd>
                    <dd>服务站点</dd>
                    <dd>保修条款</dd>
                    <dd>增值服务</dd>
                </dl>
            </li>
            <li>
                新闻
                <dl>
                    <dd>新闻</dd>
                    <dd>荣誉获奖</dd>
                </dl>
            </li>
            <li>
                媒体
                <dl>
                    <dd>产品目录</dd>
                    <dd>壁纸下载</dd>
                    <dd>MSI App</dd>

                </dl>
            </li>
            <li>
                关于微星
                <dl>
                    <dd>微星简介</dd>
                    <dd>品牌故事</dd>
                    <dd>媒体平台</dd>
                    <dd>品质认证</dd>
                    <dd>品质标准</dd>
                </dl>
            </li>
        </ul>
    </div>
    <!-- 底部下部分 -->
    <div class="footer_bottom">
        <a href="#">联系我们</a>
        <a href="#">隐私保护权政策</a>
        <a href="#">网站使用条款</a>
    </div>
    <!-- 版权保护 -->
    <div class="copyright">
        <div class="logo"></div>
        Copyright © 2020 版权为微星科技股份有限公司所有 沪ICP备19047683号
    </div>
</footer>
<script>
  $('.top_nav > ul > li:first').mousemove(function(){
      $('.table_goods').css({
          height:'400px',
          borderBottom:'4px solid red'
      })
      $('.goods_left ul').show()
  })

  $('.top_nav > ul > li:first').mouseout(function(){
      $('.table_goods').css({
          height:'0px',
          borderBottom:'0px'
      })
      $('.goods_left ul').hide()
  })

  $('.top_nav > ul > li:eq(1)').mousemove(function(){
      $('.table_list').css({
          height:'300px',
          borderBottom:'4px solid red'
      })
  })
  $('.top_nav > ul > li:eq(1)').mouseout(function(){
      $('.table_list').css({
          height:'0px',
          borderBottom:'0px'
      })
  })
  $('.top_nav > ul > li:eq(2)').mousemove(function(){
      $('.table_active').css({
          height:'300px',
          borderBottom:'4px solid red'
      })
  })
  $('.top_nav > ul > li:eq(2)').mouseout(function(){
      $('.table_active').css({
          height:'0px',
          borderBottom:'0px'
      })
  })
  $('.top_nav > ul > li:eq(3)').mousemove(function(){
      $('.table_main').css({
          height:'300px',
          borderBottom:'4px solid red'
      })
  })
  $('.top_nav > ul > li:eq(3)').mouseout(function(){
      $('.table_main').css({
          height:'0px',
          borderBottom:'0px'
      })
  })
  $('.goods_left > ul > li:first').mousemove(function() {
      $('.mac').show()
  })
  $('.goods_left > ul > li:first').mouseout(function() {
      $('.mac').hide()
  })
  $('.goods_left > ul > li:eq(1)').mousemove(function() {
      $('.pc').show()
  })
  $('.goods_left > ul > li:eq(1)').mouseout(function() {
      $('.pc').hide()
  })
  $('.goods_left > ul > li:eq(2)').mousemove(function() {
      $('.socket').show()
  })
  $('.goods_left > ul > li:eq(2)').mouseout(function() {
      $('.socket').hide()
  })
  $('.goods_left > ul > li:eq(3)').mousemove(function() {
      $('.cpu').show()
  })
  $('.goods_left > ul > li:eq(3)').mouseout(function() {
      $('.cpu').hide()
  })
  $('.goods_left > ul > li:eq(4)').mousemove(function() {
      $('.display').show()
  })
  $('.goods_left > ul > li:eq(4)').mouseout(function() {
      $('.display').hide()
  })
  $('.mac').mousemove(function(){
      $(this).show()
      $('.mac_box').css('width','250px')
  })
  $('.mac').mouseout(function(){
      $(this).hide()
      $('.mac_box').css('width','0px')
  })
  $('.pc').mousemove(function(){
      $(this).show()
      $('.pc_box').css('width','250px')
  })
  $('.pc').mouseout(function(){
      $(this).hide()
      $('.pc_box').css('width','0px')
  })
  $('.socket').mousemove(function(){
      $(this).show()
      $('.socket_box').css('width','250px')
  })
  $('.socket').mouseout(function(){
      $(this).hide()
      $('.socket_box').css('width','0px')
  })
  $('.cpu').mousemove(function(){
      $(this).show()
      $('.cpu_box').css('width','250px')
  })
  $('.cpu').mouseout(function(){
      $(this).hide()
      $('.cpu_box').css('width','0px')
  })
  $('.display').mousemove(function(){
      $(this).show()
      $('.display_box').css('width','250px')
  })
  $('.display').mouseout(function(){
      $(this).hide()
      $('.display_box').css('width','0px')
  })
  $('.goods_left > ul > li:eq(0)').mousemove(function(){
      $('.goods_left > ul > li:eq(0) > ol').show()
  })
  $('.goods_left > ul > li:eq(0)').mouseout(function(){
      $('.goods_left > ul > li:eq(0) > ol').hide()
  })
  $('.goods_left > ul > li:eq(1)').mousemove(function(){
      $('.goods_left > ul > li:eq(1) > ol').show()
  })
  $('.goods_left > ul > li:eq(1)').mouseout(function(){
      $('.goods_left > ul > li:eq(1) > ol').hide()
  })
  $('.goods_left > ul > li:eq(2)').mousemove(function(){
      $('.goods_left > ul > li:eq(2) > ol').show()
  })
  $('.goods_left > ul > li:eq(2)').mouseout(function(){
      $('.goods_left > ul > li:eq(2) > ol').hide()
  })
  $('.goods_left > ul > li:eq(3)').mousemove(function(){
      $('.goods_left > ul > li:eq(3) > ol').show()
  })
  $('.goods_left > ul > li:eq(3)').mouseout(function(){
      $('.goods_left > ul > li:eq(3) > ol').hide()
  })
  $('.goods_left > ul > li:eq(4)').mousemove(function(){
      $('.goods_left > ul > li:eq(4) > ol').show()
  })
  $('.goods_left > ul > li:eq(4)').mouseout(function(){
      $('.goods_left > ul > li:eq(4) > ol').hide()
  })
</script>
<!-- 小屏菜单 -->
<script>
  $('.tops_left > a:first').click(function(){
      $('.click_menu').css('width','100%')
      $(this).hide(500)
      $('.tops_left > a:last').show(500)
      // $('.click_menu').show()
  })
  $('.tops_left > a:last').click(function(){
      $('.click_menu').css('width','0')
      $(this).hide(500)
      $('.tops_left > a:first').show(500)
      // $('.click_menu').hide()
  })
  $('.menu_box > ul > li > em').click(function(){
      $(this).siblings('span').addClass('wth1')
  })
  $('.menu_box > ul > li > span > em').click(function(){
      $(this).parent('span').removeClass('wth1')
  })
  // $('.menu_box > ul > li:first').click(function(){
  //     $('.menu_box > ul > li:first span').css('width','100%')
  // })
  // $('.menu_box > ul > li:first em').click(function(){
  //     //  if (flag) {
  //         $('.menu_box > ul > li:first span').addClass('wth')
  //         // flag = false
  //     //  }else {
  //         // $('.menu_box > ul > li:first span').classList.remove('wth')
  //         // flag = true
  //     //  }
  // })

  // $('.menu_box > ul > li:eq(1)').click(function(){
  //     $('.menu_box > ul > li:eq(1) span').css('width','100%')
  // })
  // $('.menu_box > ul > li:eq(1) span em').click(function(){
  //      $('.menu_box > ul > li:eq(1) span').addClass('wth')
  // })

  // $('.menu_box > ul > li:eq(2)').click(function(){
  //     $('.menu_box > ul > li:eq(2) span').css('width','100%')
  // })
  // $('.menu_box > ul > li:eq(2) span em').click(function(){
  //      $('.menu_box > ul > li:eq(2) span').addClass('wth')
  // })

  // $('.menu_box > ul > li:eq(3)').click(function(){
  //     $('.menu_box > ul > li:eq(3) span').css('width','100%')
  // })
  // $('.menu_box > ul > li:eq(3) span em').click(function(){
  //      $('.menu_box > ul > li:eq(3) span').addClass('wth')
  // })
</script>
<!-- // 底部论坛手风琴 -->
<script>
 $('.footers_top > ul > li').mouseenter(function(){
     $(this).stop().animate({
          height:250
     }).find('dl').stop().fadeIn()
     $(this).siblings().stop().animate({
         height:40
     }).find('dl').stop().fadeOut()
 })
//    $('.footers_top > ul > li:first').mouseenter(function(){
//     $('.footers_top > ul > li:first dl').show()
//     $('.footers_top > ul > li:eq(1) dl').hide()
//     $('.footers_top > ul > li:eq(2) dl').hide()
//     $('.footers_top > ul > li:eq(3) dl').hide()
//     $('.footers_top > ul > li:eq(4) dl').hide()
//    })
//    $('.footers_top > ul > li:eq(1)').mouseenter(function(){
//     $('.footers_top > ul > li:first dl').hide()
//     $('.footers_top > ul > li:eq(1) dl').show()
//     $('.footers_top > ul > li:eq(2) dl').hide()
//     $('.footers_top > ul > li:eq(3) dl').hide()
//     $('.footers_top > ul > li:eq(4) dl').hide()
//    })
//    $('.footers_top > ul > li:eq(2)').mouseenter(function(){
//     $('.footers_top > ul > li:first dl').hide()
//     $('.footers_top > ul > li:eq(1) dl').hide()
//     $('.footers_top > ul > li:eq(2) dl').show()
//     $('.footers_top > ul > li:eq(3) dl').hide()
//     $('.footers_top > ul > li:eq(4) dl').hide()
//    })
//    $('.footers_top > ul > li:eq(3)').mouseenter(function(){
//     $('.footers_top > ul > li:first dl').hide()
//     $('.footers_top > ul > li:eq(1) dl').hide()
//     $('.footers_top > ul > li:eq(2) dl').hide()
//     $('.footers_top > ul > li:eq(3) dl').show()
//     $('.footers_top > ul > li:eq(4) dl').hide()
//    })
//    $('.footers_top > ul > li:eq(4)').mouseenter(function(){
//     $('.footers_top > ul > li:first dl').hide()
//     $('.footers_top > ul > li:eq(1) dl').hide()
//     $('.footers_top > ul > li:eq(2) dl').hide()
//     $('.footers_top > ul > li:eq(3) dl').hide()
//     $('.footers_top > ul > li:eq(4) dl').show()
//    })
</script>
</body>

</html>