1

我正在构建一个导航栏，需要在按钮之前和按钮之后插入一个括号，以便在悬停并选择时突出显示按钮，如下例所示

[  Button 1  ]    button 2    button 3    button 4

我正在使用括号宽度=7px 高度=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>bounce' ，当鼠标悬停时按钮会向右移动。我改变了这个并使用了position: absolute，它可以工作，但是括号显示在文本 (narrow) 上。为了将它们分开一点，我添加了left: 0.5px for :before和right: 0.5px for :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 但是在 #np-access a:hover 中添加了一个填充，比如 padding: 0 3px; ??

于 2012-12-18T21:41:34.840 回答