3

我有这个导航菜单，我需要每行前面的圆形项目符号。HTML代码在这里

http://jsfiddle.net/qhoc/yY84q/1/

<ul>
   <li>
       <a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
   </li>
   <li>
       <a>Aliquam tincidunt mauris eu risus.</a>
   </li>
   <li>
       <a>Vestibulum auctor dapibus neque.</a>
   </li>
</ul>

CSS代码：

li{list-style-type:none;}
li:before{content:'\00b7'; font-size:100px; line-height:24px; vertical-align:middle;}

li:hover {
    background:gray;
}

li a {
    cursor:pointer;
}

如您所见，当我将鼠标悬停在子弹本身上时，灰色选择是错误的。它跳到下面的菜单项。另外，它不再是其中的一部分，<a>因此如果我的鼠标位于圆形子弹上方，我将无法单击。

那么如何在不添加 js 代码或更改 HTML 结构的情况下解决这个问题呢？

注 1：导航菜单在sidebar-nav这里，因为我进行了抽象以使其易于阅读： http: //flatstrap.org/examples/fluid.html

注 2：我在想的一个丑陋的替代方案是将子弹作为背景图像。但这意味着我必须创建大量图像，因为颜色有多种变化，而且我必须为白色和灰色背景（：悬停）做这件事。我宁愿不这样做。

注 3：我需要像原始代码中的大圆子弹（它是 UI 设计）。

4

3 回答 3

2

在此处查看演示

只需替换li:before为，li a:before这样您就可以将链接放在项目符号上。并且对于 CSS HEX VALUE 也可以使用这个'\2022'

li{list-style-type:none;}
li a:before{content:'\2022'; font-size:40px;line-height:0;vertical-align:middle;}

li:hover {
    background:gray;
}

li a {
    cursor:pointer;
}
于 2013-10-14T06:47:55.287 回答
1

圆圈不是链接的一部分，因为您在li. 将其设置为实际a值，它将成为链接的一部分。

至于背景颜色跳跃的问题；发生这种情况是因为您的荒谬font-size和不匹配line-height。要么找到一个更大的圆圈符号，要么用 CSS 创建一个圆圈。

这是一个带有 CSS 圆圈的 JS Fiddle 的分支。

于 2013-10-14T06:48:40.483 回答
1

这是因为您使用line-height了font-size这么大的显式，如果您删除它，它将起作用。但这不是解决方案，因此解决方案是pointer-events: none;为您的:before伪添加。

li:before{
   content:'\00b7'; 
   font-size:100px; 
   line-height:24px; 
   vertical-align:middle;
   pointer-events: none;
}

演示

我已经添加了一个指向该属性的链接，以便您可以参考浏览器支持。

于 2013-10-14T06:39:16.153 回答