1

非常にシンプルな水平メニューがあります。ホバー時にフォントが太字になるようにしたかったのです。ホバーするとテキストが太字になりますが、右側のすべてのメニュー項目が数ピクセル右に切り替わります。誰かがそれを回避する方法を理解するのを手伝ってくれることを願っています. ありがとうございました。

フィドル : : http://jsfiddle.net/QKBUS/

HTML :

<div id="header">
  <ul id="menu">
    <li class="bouton_gauche"><a href="">agenda</a></li>
    <li class="bouton_gauche"><a href="">messagerie</a></li>
    <li class="bouton_gauche"><a href="">communautée</a></li>
    <li class="bouton_gauche"><a id="btn-deconnexion" href="">déconnexion</a></li>
    <li class="bouton_droite"><a href="">[logo]</a></li>
  </ul>
</div>​

CSS :

ul#menu { 
list-style-type : none; 
}

li.bouton_gauche {
float : left;
margin-right:15px;
}

li.bouton_droite {
float : right;
}

ul#menu a{
text-decoration: none;
}

ul#menu a:hover{
font-weight: bold;
}​
4

2 に答える 2

2

あなたが主張するなら... http://jsfiddle.net/thirtydot/QKBUS/18/

に追加text-align: centerしてからul#menu、次の JavaScript を使用します (jQuery を使用):

$('#header li a').each(function() {
    var temp = $(this).hide().clone().appendTo($(this).parent()).css('font-weight', 'bold').show();
    $(this).show().parent().width(temp.width());
    temp.remove();
});​
于 2012-11-28T12:17:34.890 に答える
1

上記は、リスト項目に固定幅を与えることで簡単に回避できますが、最初の項目が他の項目から離れすぎて見えるため、最初の項目には別の幅を使用する必要があります。

于 2012-11-28T12:06:21.980 に答える