0

我有一个放置在 a 中的导航列表，我试图在您悬停时获取显示在链接两侧的图像。基本上在链接的每一侧都有一个箭头。

我已经设法获得了我正在寻找的效果：

<ul>
          <li style=""> <a href="#">Services</a> </li>
          <li> <a href="#">About</a> </li>
          <li> <a href="#">Media</a> </li>
          <li> <a href="#">FAQ</a> </li>
          <li> <a href="#">Portfolio</a> </li>
          <li> <a href="#">Contact</a> </li>
        </ul>


.nav ul{
    list-style:none;
    text-align:center;

}


.nav li:hover a:before, .nav li:hover a:after {
    content:url(../images/nav_bullet.png);
}

最终结果将如下所示，但列表居中：

link
>> Hovered Link <<
link

但是我不确定这是否是最好的方法，并且图像太接近文本。我尝试放置边距和填充，但没有奏效。最重要的是，图像未与链接文本垂直居中。

任何人都知道这样做的正确方法，因为我只是通过反复试验吗？

4

1 回答 1

0

我能够通过在不同站点上提供的答案来完成此操作，可以使用两种类似的方法来完成：如此处所述

如果你给父元素 position: relative，你可以给那些伪元素 position: absolute 并更准确地定位它们。

第二种方法是：

.nav li:hover a:before, .nav li:hover a:after {
content:url(../images/nav_bullet.png);
margin:0 5px;/* horizontal margin*/
position:relative;
top:2px;/* or what ever you need */
}

但是，当我通过反复试验学习所有内容时，即使这可行，任何人都可以确认这是否是解决此问题的正确方法，还是我应该采取不同的方式来符合合规性、标准和兼容性？

于 2012-06-16T11:57:23.637 回答