Question

这是一个相当奇怪的结果。代码如下：

<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的不透明度设置为任何值（＆lt; 1），则不能点击投票按钮。我的意思是不可点击的是鼠标悬停时光标不是指针，单击时它没有效果。

jsFiddle link

Answer 1

添加作为答案，因为我还没有发表评论：

正如@jcaron所说，你的div.meta与投票按钮位于同一个空间。由于投票按钮是浮动的，因此它们会从正常流程中删除，这意味着div.meta一直向上滑动到文档的顶部。但是，当你在它上面设置不透明度时，它会掩盖浮动div。

然而，当@jcaron说margin-right时输入错误。你想要的是 margin-left 。值30px就足够了。

Answer 2

div.meta覆盖div.vote-buttons（因为后者设置了float）。

一种选择是在margin-right添加div.meta以便将其排除在外。

Answer 3

这很奇怪。在可能的情况下，我倾向于选择rgba()，但这并不会产生相同的效果，所以我建议改为：

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

不透明度会使邻居元素无法点击？

3 个答案: