【九月打卡第3天】侧边漂浮

<div class="tool-bar">
    <div class="item"><i class="icon"></i>
      <div class="name">购物车</div>
    </div>
    <div class="item"><i class="icon"></i>
      <div class="name">收藏</div>
    </div>
    <div class="item"><i class="icon"></i>
      <div class="name">限时活动</div>
    </div>
    <div class="item"><i class="icon"></i>
      <div class="name">大礼包</div>
    </div>
  </div>
  <script>
    // 1/获取元素
    var iconEls = document.querySelector('.icon')
    var toolBarEl = document.querySelector('.tool-bar')

    // 2.动态设置
    for (var i = 0; i < i.iconEls.length; i++) {
      var iconEl = iconEls[i]
      iconEl.style.backgroundPosition = `-48px-${i * 50}px`
    }

    // 监听鼠标事件
    toolBarEl.onmouseover = function(){
      var iconEl = event.target
      var nameEl = iconEl.nextElementSibling 
     
    }
  </script>