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

【问题标题】：Hover/Link state is only triggered on certain areas of link悬停/链接状态仅在链接的某些区域触发
【发布时间】：2012-07-06 03:38:26
【问题描述】：

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

这里是使用它的网站：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;
}

【问题讨论】：

它的高度和宽度是其父级的 100% 吗？我遇到了这样的问题
它似乎是左边的浮动。我尝试将浮动添加到链接本身，但没有成功。任何想法为什么浮动会导致这种情况？当我从柜台上取下浮子时，它们工作正常。但是，我也需要浮动。
删除浮动是有效的，因为它将:before 间距移到了链接之外。
是的.. 将:before 移动到#facebook 和#twitter 上的:after 似乎可以做到这一点。有点不高兴，因为你有一些奇怪的百分比定位，也许考虑使用精确像素。当然还有一些浏览器检查

标签： css hyperlink hover

【解决方案1】：

问题是 div #fbcount.count 的 z-index 比 a#facebook 多，而 div #twcount.count 的 z-index 比 a#twitter 多。调整它们以低于各自的链接（将它们的 z-index 减小到比链接更小的值）。到目前为止，当鼠标悬停在 div 上时，悬停事件由 div 而非链接注册。

【讨论】：

添加了相对位置和 5 的 z-index 都没有运气。
链接的 z-index 是多少？
给出#fbcount.count 和#twcount.count，z-index 4
对不起，您的 z-index 是正确的。将它添加到它时我很着急，并且出于某种原因认为有其他东西妨碍了它，而不是那两个相互干扰。这很完美！谢谢。

【解决方案2】：

罪魁祸首是.count 上的:before 选择器左侧定位为-100%。 :before 选择器无论如何都不能在 IE 中工作（如果你在乎的话）。

另一种解决方案是为三角形制作一个单独的 DIV，让它们也向左浮动，以便它们完美对齐。

编辑：啊哈...:before 伪元素继承父级的属性，在本例中为.count。所以那个小三角形的宽度实际上是 35px。

解决方案：有点老套...但我将.count 上的:before 移动为#facebook 和#twitter 上的:after。一点定位，它似乎工作。要垂直对齐文本，您可以将line-height 设置为与height 相同。

JSFiddle：http://jsfiddle.net/XmYwe/1/

希望这会有所帮助！

【讨论】：

谢谢，感谢您的帮助。我知道它必须是什么。
很高兴能帮上忙！那是一个有趣的
再次感谢您的解决方案。上面 Ashwin 的方法更适合我的情况，它允许计数器全部为一体，而不会有点 hacky。不过，我感谢您的帮助！