javascript - 不透明度使相邻元素不可点击？

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

jsFiddle link

Answer 1

添加为答案，因为我还不能发表评论:

正如@jcaron 所说，您的div.meta 与投票按钮位于同一空间。由于投票按钮是 float 的，它们从正常流程中移除，这意味着 div.meta 一直滑动到文档的顶部。但是，当您为其设置不透明度时，它会覆盖 float 的 div。

但是，@jcaron 在说 margin-right 时打错了。你想要的是 margin-left。 30px 的值应该足够了。