不透明使相鄰元素不可點擊？

這是一個相當奇怪的結果。代碼如下：不透明使相鄰元素不可點擊？

<div class="vote-buttons"> 
<a class="clickable vote up "> 
    <i class="fa fa-arrow-up"></i> 
</a> 
<span class="num">0</span> 
<a class="clickable vote down " > 
    <i class="fa fa-arrow-down"></i> 
</a> 
<a class="clickable vote save " 
    title=" save "> 
    <i class="fa fa-star"></i> 
</a> 
</div> <!--.vote-buttons--> 
<div class="meta"> 
    title 
</div>

發生的事情是，如果我設置div.meta的不透明度爲任意值（< 1），然後將投票支持按鈕無法點擊。我的意思是不可點擊的是光標懸停時不是指針，點擊時不起作用。

jsFiddle link

來源

2014-07-02 flyingfoxlee

添加作爲一個答案，因爲我不能評論尚未：

由於@ jcaron說，你的div.meta坐在與投票按鈕相同的空間。由於投票按鈕是浮動的，它們將從正常流程中移除，這意味着div.meta一直滑到文檔的頂部。但是，當你設置不透明度時，它會覆蓋浮動div。

不過，@jcaron錯字時他說margin-right。你想要的是margin-left。值30px應該就足夠了。

來源

2014-07-02 02:10:30 ZeroRequiem

謝謝，你的解釋很清楚。 – flyingfoxlee

的div.meta覆蓋所述div.vote-buttons（因爲後者具有float集）。

一種方法是將margin-right添加到您的div.meta以避開它。

來源

2014-07-02 01:23:07 jcaron

這是一件奇怪的事情。我傾向於選擇rgba()如果可能的話，並不會產生同樣的效果，所以我建議改爲：

.meta { 
    /* opacity: 0.8; */ 
    color: rgba(0, 0, 0, 0.8); 
}

來源

2014-07-02 01:59:28

對於我來說，這似乎並不是一回事，在這裏，您爲「meta」類中的文本設置了黑色，如果他想要藍色文本，該怎麼辦？或者減少整個元素的不透明度（包括背景圖像可能）？ – Oliboy50

不透明使相鄰元素不可點擊？

回答

相關問題