1

ナビゲーションで、ホバーした項目の左右に境界線を追加したいと考えています。これは機能しますが、要素に 2px を追加していると、他の要素が押し出されます。ナビゲーションの残りの部分に影響を与えずに、ホバーしたリスト項目のほぼ内側に境界線を追加するにはどうすればよいですか?

 // Simple example:
 li {
     list-style: none;
     display: inline;
 }

 li a:hover {
     border-left: 1px solid black;
     border-right: 1px solid black;
 }

 // HTML:
 <ul>
     <li><a href="">Test 1</a></li>
     <li><a href="">Test 2</a></li>
     <li><a href="">Test 2</a></li>
 </ul>

または、アクティブな例については、jsfiddle リンクにアクセスしてください。

4

2 に答える 2

4

aタグに透明な境界線を追加します。

li a {
    border: 1px transparent solid;
    border-width: 0 1px;
}

http://jsfiddle.net/dfsq/95ZUw/1/

于 2013-02-15T12:15:29.223 に答える
2

最善の解決策ではありませんが、... 1px のパディングを追加し、ホバーがトリガーされたときにそれを削除します。あなたの場合、それを行うことは可能ですか？

li {
list-style: none;
display: inline;
}

li > a { padding:0 1px; }

li a:hover {
border-left: 1px solid black;
border-right: 1px solid black;
padding:0;
}
于 2013-02-15T12:18:03.537 に答える