0

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

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

解释：菜单必须选择当前。但是，当您悬停另一个时#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（典型的、有效的 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>
4

2 回答 2

1

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

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

并删除“真实”类以返回当前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/
使用焦点修复错误
以修复闪烁我为每个“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/

于 2013-07-30T16:56:58.777 回答
0

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

于 2013-07-30T16:27:12.780 回答