Question

我想使用一组锚元素在网站上创建菜单栏。到目前为止，一切都按计划完成。

现在我想要一个图像跟随用户选择。因此，图像位于当前活动菜单项，但是当用户将鼠标悬停在另一个菜单项上时，图像将跟随该特定项。

我尝试在网上搜索它，但我得到了很多简单的悬停效果，而不是我想要的。所以也许你们其中一个人可以帮我一个例子，或者给我一个正确的方向。

我的菜单是这样的

<nav id="page-nav">
    <a href="#">item #1</a>
    <a href="#">item #2</a>
    <a href="#">item #3</a>
    <!-- etcetera -->
</nav>

我现在正在使用CSS将其变成菜单栏。

a {
        display: inline-block;
        position: relative;
        width: 156px;
        height: 37px;

        top: -1px;

        text-align: center;
        line-height: 41px !important;

        color: #c3c3c3;
        text-decoration: none;
        text-shadow: 1px 1px 0px black;
        text-transform: uppercase;

        font-family: "Myriad Pro", "Calibri", sans-serif;
        font-size: 16px;
        letter-spacing: 1px;

    }

我希望图片能够跟随用户的操作。如果我将图像用作按钮上的背景，则无法将其从一个项目滑动到另一个项目...

谢谢！

Answer 1

demo

我做了一个小小的小块，但你可以给它一个背景图像，或用图像替换它，或者其他什么。它使用CSS过渡，因此它将在旧版浏览器上传送。

.blip {
  position: absolute;
  border-radius: 50%;
  background: rgba(100, 100, 255, .4);
  width: 40px;
  height: 20px;
  top: -10px;;
  left: -100px;
  -webkit-transition: left .5s ease-in-out;
     -moz-transition: left .5s ease-in-out;
          transition: left .5s ease-in-out;
}

如果您不想使用CSS过渡，请将.css替换为.animate。

var $blip = $('.blip');

$('#page-nav>a').on('mouseover', function(){
  $blip.css({
    left: $(this).offset().left 
        - $(this).parent().offset().left 
        + $(this).width() / 2 
        - 20 // 20 is one half of .blip's width
  });
});

$('#page-nav').on('mouseout', function(){
  $('.blip').css({left: -100});
});

网页菜单悬停效果与后面的对象

1 个答案:

demo