1

私はナビゲーションバーを構築しており、ボタンの前とボタンの後にブラケットを挿入して、以下の例のようにホバーして選択したときにボタンを強調表示する必要があります

[  Button 1  ]    button 2    button 3    button 4

ブラケット width=7px height=30px の画像を使用しています。私の CSS は限られており、独学で学んでいます! 以下のようにposition: relativeを使用すると、すべてが機能するようになりました

#np-access a:hover:before{ 
  content: url(images/bracket-left.png); 
  position:relative;
  top: 10px; 
}

#np-access a:hover:after {
   content: url(images/bracket-right.png); 
   position:relative;
   top: 10px;
}

ただし、これによりナビゲーションが「<strong>バウンス」し、ホバーするとボタンが右に移動します。これを変更して使用しました position: absoluteは機能しますが、ブラケットはテキスト (narrow) の上に表示されます。それらを少し広げるために、左: 0.5pxを:before に、右: 0.5pxを:afterに追加しましたが、最初のブラケットがなく、他のブラケットは問題ないように見えますが、近すぎます。つまり、ボタン 2 の右ブラケットはボタン 3 の左ブラケット (パディングなし) に近すぎますが、正しく機能します (以下の例)。

   button 1  ][   button 2   ][  button 3  ][  button 4  ]

ブラケットにパディングを追加しようとしました (ボタン 2 の右ブラケットがボタン 3 の左ブラケットに近すぎます)。アンカー属性のパディングを 1.5em から2emに増やしましたが、ブラケットが続き、外観は同じままでした。

#np-access a {
color: #5F5B5B; 
display: block;
line-height: 3.333em;
padding: 0 1.5em;
text-decoration: none;


}

絶対位置を使用すると、最初のブラケットが欠落するのはなぜですか? パディングを追加するにはどうすればよいですか？誰かが私が間違っている場所について説明してくれることを願っています! 事前に感謝します私のCSSは以下です

#np-access .current-menu-item > a:after,
#np-access .current-menu-ancestor > a:after,
#np-access .current_page_item > a:after,
#np-access .current_page_ancestor > a:after {
 content: url(images/bracket-right.png); 
 position:absolute;
 right: 0.5px;
 top: 10px;
}

#np-access .current-menu-item > a:before,
#np-access .current-menu-ancestor > a:before,
#np-access .current_page_item > a:before,
#np-access .current_page_ancestor > a:before {
     content: url(images/bracket-left.png); 
     position:absolute;
     left: -0.5px;
     top: 10px; 
}


#np-access a:hover:before{ 
    content: url(images/bracket-left.png); 
    position:absolute;
    left: -0.5px;
    top: 10px; 
}

#np-access a:hover:after {
    content: url(images/bracket-right.png); 
    position:absolute;
    right: 0.5px;
    top: 10px;

}

現在動作するコード

#np-access a:hover:before{ 
   content: url(images/bracket-left.png); 
    position:absolute;
    left: 1px;
    top: 10px; 
    padding: 0 10px;
 }

 #np-access a:hover:after {
    content: url(images/bracket-right.png); 
    position:absolute;
    right: 0.5px;
    top: 10px;
    padding: 0 10px;
  }

ありがとうございます！

4

1 に答える 1

2

-0.5px 左にすると、最初のブラケットがページからはみ出します。

:before と :after に left:0 right:0 を持たないのはなぜですか? padding: 0 3px; のように #np-access a:hover にパディングを追加します。??

于 2012-12-18T21:41:34.840 に答える