css ~选择器的巧用

前言

早上在sg上看到一篇文章，讲的是作者一个js的效果研究了一天，是什么样的效果呢，大概就是（套用作者原话：）

当鼠标移入导航栏的某个栏目时，顶部的4px 的蓝色滑动条要尾随着鼠标，如丝般顺滑地滑入相应栏目的顶部位置，当鼠标leave时，蓝色滑动条要退回到当前current的栏目顶部。

（文尾我会把作者的链接发出来，感兴趣的小伙伴可以移步去看下。）

给出我自己实现的效果图：

作者的探索精神挺值得我们学习的，但是这样写又略显复杂，文章评论中又说可以一行js也不用写，只通过css就能完全实现这个效果,并给出了大致思路，我就沿着这个思路大概写了一下。

html部分

<div>
  <ul style="position:relative;">
    <li class="item-1">home</li>
    <li class="item-2">news</li>
    <li class="item-3">products</li>
    <span class="slider"></span>     <!-- 顶部的随行滑动条 -->
  </ul>
 </div>

css（只贴重点部分的代码）

.slider{
  width:100px;
  left:0;
  height:4px;
  background: #de4723;
  position: absolute;
  top:0px;
  transition:left .3s;
}
.item-1:hover ~.slider{
  left: 0px;
}
.item-2:hover ~.slider{
  left: 100px;
}
.item-3:hover ~.slider{
  left: 200px;
}

关于 ~选择器

X ~ Y :
这种选择器标示匹配任何在X元素之后的同级Y元素。请注意重点强调的词， 因为刚开始我把需要随行滑动的span标签放在了所有的li标签之前，导致这个效果一直未实现，后来移动了顺序以后就实现了，所以使用这个选择器的时候一定要正确放置元素位置。

结语

作者原文下回复中还有其他小伙伴提供的实现方案，感兴趣的小伙伴也可以去研究下。

相关链接

1. 一个JS效果竟然要研究一天，我是不是不适合做前端？