1

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

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

2 回答 2

1

问题是 div#fbcount.count的 z-index 比您的多a#facebook，而您的 div#twcount.count的 z-index 比a#twitter. 将它们调整到它们各自的链接下方（将它们的 z-index 减小到比链接更小的值）。截至目前，悬停事件由 div 注册，而不是鼠标悬停在链接上时的链接。

于 2012-07-06T03:50:36.413 回答
1

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

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

编辑：啊哈......:before伪元素继承了父级的属性，在这种情况下.count。所以那个小三角形实际上有 35px 的宽度。

解决方案：有点老套......但我把:beforeon.count变成了:afteron #facebookand #twitter。一点定位，它似乎工作。要垂直对齐文本，您可以将 设置line-height为与 相同height。

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

希望这可以帮助！

于 2012-07-06T03:59:04.193 回答