Question

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

说明：菜单必须选择当前。但是，当您悬停另一个#menu li a时，当前状态必须消失并显示在悬停元素上。当悬停时，如果没有点击，当前状态必须返回真实当前#menu li a

注意：

它应该是一个基于尽可能多的CSS和尽可能少的jQuery的解决方案。但我确实理解jQuery是必要的
必须尊重小提琴的过渡
如果它不代表额外的代码，我希望它能用于焦点状态

你们很棒，非常感谢你们提供任何帮助！

这是我自己编写的代码，当然，不工作......

$(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");   
    }
    );
});

并删除'real'类以返回当前http://jsfiddle.net/fYq6k/2/
UPDATE
使用焦点

$(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"); 
    });
});

你需要在事件焦点和模糊http://jsfiddle.net/fYq6k/5/上做同样的事情使用焦点修复bug 修复闪烁我为每个“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/

Answer 2

我找到了这个示例页面：http://www.script-tutorials.com/demos/249/index.html 在其中，当鼠标悬停在菜单上时，选择返回到“home”。还有一个教程。它不包含我认为的任何JavaScript。

菜单动画和悬停状态 - 简单的jQuery解决方案（熔岩灯菜单的想法）

2 个答案: