在悬停的边界动画

Question

我想知道，我怎样才能创建这样的效果，用户将鼠标悬停在一个盒子上，并且当悬停其他盒子时边框跟随鼠标位置？我试图搜索类似的例子，我找不到任何东西。

鼠标悬停：

Answer 1

我创造了一个Demo！ 也许这就是你想要的:)

$(document).ready(function() {
  var navBar = $('#navBar');
  var perNav = $('#navBar nav');
  var borderBlock = $('#navBar #imBorder');

  /* onHover events */
  perNav.hover(

    //mouseover
    function() {
      //Get the positionX of nav which is hovered.
      //Then turn the value to Integer
      var offsetX = $(this).position().left;

      /* #imBorder change positionX and fadeIn */
      borderBlock.css({
        'transform': 'translateX(' + offsetX + 'px)',
        'opacity': '1'
      })
    },

    //mouseout
    function() {
      /* #imBorder fadeOut */
      borderBlock.css({
        'opacity': '0'
      })
    }
  );

})

* {
  padding: 0;
  margin: 0;
}

body {
  background: #444;
}

#navBar {
  display: block;
  width: 324px;
  margin: 100px auto 0;
  position: relative;
}

#navBar #imBorder {
  pointer-events: none;
  /* Prevent #imBorder block on top when hovered */
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 102px;
  height: 50px;
  border: 2px solid #fff;
  box-shadow: 0px 0px 7px #fff;
  /* for animation */
  transition: transform 250ms ease, opacity 300ms ease;
  transform: translateX(0);
  opacity: 0;
}

#navBar>nav {
  width: 100px;
  height: 50px;
  background: #f00;
  color: #fff;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  margin: 0 2px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="navBar">
  <div id="imBorder"></div>
  <nav>button1</nav>
  <nav>button2</nav>
  <nav>button3</nav>
</div>