css - 悬停/链接状态仅在链接的某些区域触发

Question

我遇到的问题是，当您将鼠标悬停在按钮上时，只有按钮的某些部分会触发悬停/可点击状态，而不是所有实际 block 。有什么想法吗？

这是使用它的站点:http://www.revival.tv/turningpoint/#about-wrap

这是CSS

#facebook, #twitter {
float: left;
display: block;
height: 25px;
width: 65px;
color:#fff;
line-height: 25px;
text-align: center;
margin-right: 7px;
border-radius:7px;
cursor: pointer;
opacity:1;
background-color: #DA178D;
background-image: -webkit-gradient(linear, left top, left bottom, from(#DA178D), to(#c3147d));
background-image: -webkit-linear-gradient(top, #DA178D, #c3147d);
background-image: -moz-linear-gradient(top, #DA178D, #c3147d);
background-image: -ms-linear-gradient(top, #DA178D, #c3147d);
background-image: -o-linear-gradient(top, #DA178D, #c3147d);
background-image: linear-gradient(to bottom, #DA178D, #c3147d);
}
#facebook:hover, #twitter:hover {
opacity:.7;
}

Answer 1

问题是 div #fbcount.count 比你的 a#facebook 和你的 div #twcount.count 有更多的 z-index比 a#twitter 有更多的 z-index。调整它们使其低于各自的链接(将它们的 z-index 降低到比链接更小的值)。截至目前，当鼠标悬停在链接上时，悬停事件由 div 而非链接注册。