懸停在：僞元素之前

我有此導航菜單，我需要每行前面的圓圈子彈。該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

懸停在：僞元素之前

回答

相關問題