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

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

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

来源

2012-07-06 souporserious

它的高度和宽度是其父项的100％吗？我有一个像这样的问题 – 2012-07-06 03:40:50

它似乎是左边的浮动。我尝试将float添加到链接本身，但没有运气。任何想法为什么浮动会导致这种情况？当我从柜台上取下浮子时，它们工作正常。但是，我也需要这样做。 – souporserious 2012-07-06 03:58:11

删除浮动工作，因为它移动'：before'间距的方式的链接。 – MusikAnimal 2012-07-06 03:59:57

的问题是，DIV #fbcount.count有更多的z-index比你a#facebook和你的DIV #twcount.count有更多Z指数比a#twitter。将它们调整到低于它们各自的链接（将它们的Z-索引降低到小于链接的值）。到目前为止，悬停事件是由div的注册，而不是鼠标悬停在它们上方的链接。

来源

2012-07-06 03:50:36

在没有运气的情况下，增加了相对位置和z-index值。 – souporserious 2012-07-06 04:01:04

什么是链接的z-索引？ – 2012-07-06 04:01:28

Give＃fbcount.count和＃twcount.count，z-index 4 – 2012-07-06 04:03:32

这是.count上的:before选择器，左侧定位为-100％，这是罪魁祸首。 :before选择器在IE中无法使用（如果你在意的话）。

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

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

SOLUTION：一个稍微有点哈克......但我对.count移动:before是在#facebook和#twitter一个:after。有点定位，它似乎工作。要垂直对齐文本，可以将line-height设置为与height相同。

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

希望这有助于！

来源

2012-07-06 03:59:04 MusikAnimal

谢谢，感谢您的帮助。我知道它必须是某种东西。 – souporserious 2012-07-06 05:36:07

很高兴有人帮忙！这是一个有趣的 – MusikAnimal 2012-07-06 05:40:40

再次感谢您的解决方案。上面的Ashwin的方法对我的情况起到了更好的作用，它允许柜台都是一件，而不会有点冒险。尽管我感谢你的帮助！ – souporserious 2012-07-06 05:53:33

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

回答

相关问题