Question

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

<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设计）。

Answer 1

<强> See The Demo here

只需将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;
}

Answer 2

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

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

Demo

我添加了该属性的链接，以便您可以参考浏览器支持。

Answer 3

圆圈不是链接的一部分，因为您在li上设置了：before伪元素。将其设置为实际的a，它将成为链接的一部分。

关于跳跃背景颜色的问题;这是因为您的荒谬font-size和不匹配的line-height。要么找到更大的圆圈符号，要么使用CSS创建圆圈。

Here's a fork of your JS Fiddle改为使用CSS圈。

悬停在：伪元素之前

3 个答案: