CSS 按钮悬停/链接只有当你悬停在它的顶部

Question

http://justxp.plutohost.net/gxx/

尝试将鼠标悬停在按钮上。

只有将鼠标悬停在按钮顶部时，悬停/链接才会起作用。为什么会这样？

这是代码:

    <a href="#">
        <div class="button-1">
            <span class="bebas">play</span>
        </div>
    </a>
    <a href="#">
        <div class="button-1">
            <span class="bebas">community</span>
        </div>
    </a>
    <a href="#">
        <div class="button-1">
            <span class="bebas">account help</span>
        </div>
    </a>

CSS

   .button-1 {
   background-image: url("../img/buttonoff.png");
   background-repeat: no-repeat;
width: 302px;
height: 82px;
margin-left: 1.4%;
margin-top: 1%;
float: left;
text-align: center;
line-height: 90px;
-webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -ms-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
}
.button-1:hover {
background-image: url("../img/buttonon.png");
background-repeat: no-repeat;
width: 302px;
height: 82px;
-webkit-transition: all 200ms ease-in-out;
        -moz-transition: all 200ms ease-in-out;
        -ms-transition: all 200ms ease-in-out;
        -o-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
}

我觉得这没什么不妥？我试过将高度调大一些，还是不行。

我对此很好奇!

Answer 1

您需要在类(class)新闻上添加边距:

.news {
    position: relative;
    top: 5%;
    margin-top: 65px;
}

编辑:

奖金!请在您的按钮背景上使用 css3 背景渐变，而不是图像。

gradients.glrzad.com

希望这对您有所帮助，抱歉，如果我错过了干扰。