悬停在：伪元素之前

我有此导航菜单，我需要每行前面的圆圈子弹。该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设计）的大圆形子弹。

来源

2013-10-14 HP.

不幸的是，我必须制作大字体，将状态指示符等作为周围的子弹。 –

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

至于背景颜色跳跃的问题;这是因为你的荒谬font-size和不匹配line-height。找到一个更大的圆圈符号或用CSS创建一个圆圈。

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

来源

2013-10-14 06:48:40

美丽的解决方案。我喜欢不使用“内容”的替代方案 –

这是因为你使用显式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

我添加了一个链接属性，让你可以参考有关浏览器的支持。

来源

2013-10-14 06:39:16

这很有创意。但仍然没有解决可点击问题。见这里http://jsfiddle.net/qhoc/yY84q/6/ –

@HP。显然它不会点击，因为当你使用'：before'或'：after'伪时，它实际上会创建一个与当前元素无关的虚拟元素，所以如果你希望子弹是可点击的，你需要声明'a：before' http://jsfiddle.net/yY84q/7/和**不**'li：之前' –

See The Demo here

只需更换li:before与li a:before所以你可以在你的子弹的链接。而且还对CSS的十六进制值，因为你设置使用此'\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-14 06:47:55

悬停在：伪元素之前

回答

相关问题