jquery - 菜单动画和悬停状态 - 简单的 jQuery 解决方案(Lava Lamp 菜单想法)

Question

我在使用主站点导航菜单时遇到以下问题。我已经回顾了编辑在提问时提出的一些问题，但没有一个是我要找的……我真的很抱歉提出这样一个具体的问题。

演示: http://jsfiddle.net/fYq6k/1/

说明:菜单必须选中当前菜单。但是，当您悬停另一个 #menu li a 时，当前状态必须消失并出现在悬停的元素上。当 hover 离开时，如果没有点击，当前状态必须返回到真实当前 #menu li a

注意:

• 它应该是一种基于尽可能多的 CSS 和尽可能少的 jQuery 的解决方案。但我明白 jQuery 是必要的

• 必须尊重 fiddle 的过渡

• 如果这并不意味着需要大量额外代码，我希望它也能与焦点状态一起使用

你们太好了，非常感谢您的帮助!

这是我自己编写的代码，当然不能用...

$(function(){
  $('#menu li a').hover(
    function() {
      $(this).addClass('current');
    },
    function() {  
      $(this).removeClass('current');
    }
  );
});

CSS:

#menu {
  display: inline-block;
  position: relative;
}

#menu li {
  display: inline-block;
  float: left;
}

#menu li a {
  display: block;
  padding: 46px 11px 0;
  border-top: 9px solid #7d7c7c;
  font: normal 15px/1em Arial, sans-serif;
  color: #6a6868;
  text-transform: uppercase;
  text-decoration: none;

  transition: all .3s ease;
}

#menu li a.current, #menu li a:hover {
  padding: 38px 11px 0;
  border-top: 17px solid #e30613;
}

HTML(tipicall，有效的 HTML5 菜单):

<header>
    <nav>
      <ul id="menu" class="clearfix">
        <li><a class="current" href="#">La Agencia</a></li>
        <li><a href="#">Que Hacemos</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
      <div class="clear"></div>
    </nav>
</header>

Answer 1

你可以像这样添加一个额外的“真实”类

$(function(){
    $('#menu li a').hover(function(){
      $('.current').removeClass('current').addClass("real");
    },function(){
      $('.real').removeClass('real').addClass("current");   
    }
    );
});    

并删除“真实”类以返回当前 http://jsfiddle.net/fYq6k/2/
更新
专注工作

$(function(){
    $('.current').addClass("real");
    $('#menu li a').hover(function(){
          $('.current').removeClass('current');
        },function(){
          $('.current').removeClass('current');
          $('.real').addClass("current");   
        }
    ).focus(function(){
          $('.current').removeClass('current');
          $(this).addClass("current");
    }).blur(function(){
         $('.current').removeClass("current");
         $('.real').addClass("current"); 
    });
});    

你需要对事件 focus 和 blur 做同样的事情 http://jsfiddle.net/fYq6k/5/
使用焦点修复错误
为了解决闪烁问题，我向每个“li a”添加了一个空的 div，并为该 div 而不是边框​​和填充设置了动画
HTML

<ul id="menu" class="clearfix">
    <li><a class="current" href="#"><div></div>La Agencia</a></li>
    <li><a href="#"><div></div>Que Hacemos</a></li>
    <li><a href="#"><div></div>Portfolio</a></li>
    <li><a href="#"><div></div>Contacto</a></li>
</ul>    

CSS

#menu li a div{
    height:9px;
    background:#7d7c7c;
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    transition: all .3s ease;
}
#menu li a.current div{
  height: 17px;
  background:#e30613;
}

http://jsfiddle.net/fYq6k/6/