出于用户体验的目的，如何使 CSS 菜单的悬停状态水平移动？

Posted 2023-05-08

【中文标题】出于用户体验的目的，如何使 CSS 菜单的悬停状态水平移动？

【英文标题】：How can I make my CSS menu's hover states move horizontally for UX purposes?

【发布时间】：2013-11-12 09:32:45

【问题描述】：

如何使我的菜单的悬停状态“红色淡出”以自然运动的方式水平移动（如图片中的示例）？

这是我在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;

【参考方案1】：

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

您有一个栏，当您将鼠标悬停在导航中的链接上时，它会以动画方式显示为活动锚点，并且与锚点大小相同。

这是我创建的小提琴，用于展示我认为你在问什么：

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

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

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

您可以使用 javascript 设置一个函数，在悬停时获取锚点的左侧位置，在 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

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

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

【讨论】：

谢谢！我以为你只能通过 CSS3 做到这一点，非常感谢。很抱歉回复晚了。昨晚我的网络中断了，然后又恢复了。

嗨“chaseadamsio”，如何给它主动？

@Kiran 你在问如何将活动类应用于元素？

谁能帮我找到这个

在mouseover 事件内部target.className += " active"; 和mouseout target.className.replace(/ active/, ''); 这就是你要的吗？

【参考方案2】：

我不确定我是否准确地回答了这个问题，但是，这里是：

在这里提琴：http://jsfiddle.net/xcRGR/4/

#menu li a 
  color: #FFF;
  padding: 50px 0 50px 0; <- amended
  margin: 0 50px 0 50px; <- New
  display: inline-block; <- NEW

#menu li a:hover 
  background: red;
  transition: .25s linear;
  -webit-transition: .25s linear;
  -moz-transition: .25s linear;
  padding: 50px 50px 50px 50px; <- amended
  margin: 0; <- NEW
  width: auto;

我基本上在按钮上添加了一些边距，将填充更改为水平而不是垂直，并转换了边距，因此边距（水平）的减少被填充的增加所占据。