Question

The problem I am having is that when you mouse over the button, only certain parts of it will trigger the hover/clickable state, not all of the actual block. Any ideas why?

Here is the site where it is being used: http://www.revival.tv/turningpoint/#about-wrap

Here is the 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

The problem is that div #fbcount.count has more z-index than your a#facebook and your div #twcount.count has more z-index than a#twitter. Adjust them to go below their respective links(decrease their z-index to a lesser value than the links). As of now, the hover event is registered by the div’s and not the links when the mouse hovers over them.