Question

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

以下是使用它的网站：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的z-index比a#facebook多，而div #twcount.count的z-index比a#twitter多。调整它们以低于它们各自的链接（将它们的z-index减少到比链接更小的值）。截至目前，当鼠标悬停在div上时，悬停事件由div记录而不是链接。

Answer 2

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

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

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

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

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

希望这有帮助！

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

2 个答案: