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

このように「本物の」クラスを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/で同じことをする必要があります 。ボーダーとパディングの 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 に答える