html - 出于用户体验的目的，我怎样才能让我的 CSS 菜单的悬停状态水平移动？

Question

如何使菜单的悬停状态“红色淡入淡出”以自然运动水平移动(如图中的示例)？

这是我在jsFiddle做的菜单尝试学习如何降低运动。我正在尝试模拟如何 http://www.fullyillustrated.com/悬停状态下的菜单，蓝色条跟随鼠标到下一个链接，导航栏图像的图像贴在下面。

#menu {
   background: #181818;
   height: 120px;
   width: 500px;
}
#menu .center {
   display: table;
   height: 120px;
   width: 500px;
}
#menu ul.menu-center {
   display: table-cell;
   vertical-align: middle;
}
#menu ul li {
   display: inline;
}
#menu li a {
   color: #FFF;
   padding: 0 50px 0 50px;
   height: 120px;
}
#menu li a:hover {
   background: red;
   transition: .25s linear;
   -webit-transition: .25s linear;
   -moz-transition: .25s linear;
   padding: 50px 50px 50px 50px;
}

Answer 1

我认为您要实现的目标必须使用 Javascript 来完成...只是为了确保我知道您在问什么:

• 您有一个栏，当您将鼠标悬停在导航中的链接上时，它会动画到事件 anchor 并且与 anchor 大小相同。

这是我创建的 fiddle 来演示我认为你在问什么:

http://jsfiddle.net/Dm9Eu/2/

如果您在访问 Fully Illustrated 时查看浏览器的网络检查器，您会看到导航有一个装订线元素，其中包含一个 span#highlight，它是包含 anchor 的导航 ul 的完整宽度。

当您将鼠标悬停在 anchor 上时，span#highlight 的左侧位置会发生变化。

您可以使用 javascript 设置一个函数，在悬停时获取 anchor 的左侧位置，在 span#highlight 上设置该位置并使用 css3 将过渡设置为“左”，它应该模拟您想要的效果。

HTML:

<div id="header">
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
</ul>
<div id="gutter">
    <span id="highlight"></span>
</div>    
</div>

CSS:

#header {
    position: relative;
}
#menu {
    width: 100%;
    height: 120px;
    background: #181818;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu li {
    margin: 0;
    padding: 0;
    float: left;
}
#menu li a {
    color: #FFF;
    margin: 0;
    padding: 50px;
    display: block;
}

#highlight {
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    background: #f00;
    transition: all .5s;
}

JS:

var doc = 文档；

var anchors = doc.getElementById('menu').getElementsByTagName('a');
var highlight = doc.getElementById('highlight');

for(var i = 0, len = anchors.length; i < len; i++) {
    anchors[i].addEventListener('mouseover', function(e) {
        var target = e.target;
        highlight.style.width = target.offsetWidth + 'px';
        highlight.style.left = target.offsetLeft + 'px';
    });

    anchors[i].addEventListener('mouseout', function(e) {
        var target = e.target;
        var storeNeg = '-' + highlight.style.width;
        console.log(storeNeg);
        highlight.style.left = storeNeg;
    });
}

一些注意事项:

• 我是用 vanilla JS 做的，所以如果你关心浏览器兼容性，你可以使用像 jQuery <= 1.9 这样的库。

• 我会用 js 在页面上注入(inject) gutter，因为如果 js 被禁用，就不需要它了。

希望能帮助/回答您的问题!