如何使网页顶部导航栏中的边框跟随光标

Question

我有一个问题。我正在制作一个网页，我知道顶部导航栏会跟随我的光标。基本上，我希望顶部栏中每个 link 周围的边框都跟随我移动鼠标光标的位置。我从 iOS（特别是照片）那里得到了这个想法，它有很多很酷的功能。知道如何实现吗？

我还为您提供了我发布视频的 link 到 google 的驱动器，因为据我所知，您目前无法直接在此处上传视频。

https://drive.google.com/file/d/17nqIWUtp0Smr4I8RzWJDahjYioLxtwdQ/view?usp=sharing

任何帮助将不胜感激。

Answer 1

抱歉，适应性不强。现在想不出更好的事情:

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  background : #000;
  padding:20px;
  margin:0;
}
div {
  background: #333;
  border-radius: 30px;
  overflow:hidden;
  padding:0 5px;
  position: relative;
  font-size:0;
  display:inline-block
}
.highlight {
  display: block;
  width: 100%;
  background: #ccc;
  position: absolute;
  height: calc(100% - 10px);
  top: calc(50%);
  transform: translateY(-50%);
  left: -100%;
  border-radius: 30px;
  transition: left .2s ease, width .2s ease;
  pointer-events: none;
  margin-left: 6px;
  width:0;
  opacity: 0;
}
a {
  display: inline-block;
  font-size: 12px;
  text-decoration: none;
  color: #FFF;
  padding: 10px;
  margin: 4px 0;
  z-index: 999;
  position:relative;
  transition: color 0 .2s;
}
a:hover {
  color: #000
}
a:hover ~ .highlight {
  opacity: 1;
}
a:nth-of-type(1):hover ~ .highlight {
  left: 0px;
  width: 39px;
}
a:nth-of-type(2):hover ~ .highlight {
  width: 42px;
  left: 50px;
}
a:nth-of-type(3):hover ~ .highlight {
  left: 104px;
  width: 35px;
}
a:nth-of-type(4):hover ~ .highlight {
  left: 152px;
  width: 59px;
}

<div>
  <a href="#">Years</a>
  <a href="#">Month</a>
  <a href="#">Days</a>
  <a href="#">All photos</a>
  <div class="highlight"></div>
</div>

如何使网页顶部导航栏中的边框跟随光标

How to make border follow the cursor in the top navigation bar on a webpage

html

javascript

css

swipe