1

我想使用一组锚元素在网站上制作一个菜单栏。到目前为止，一切都按计划进行。

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

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

我的菜单是这样制作的

<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;

    }

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

谢谢！

4

1 回答 1

3

演示

我做了一个小块，但你可以给它一个背景图像，或者用图像替换它，或者其他什么。它使用 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});
});
于 2013-08-15T14:11:04.343 回答