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

您需要在课堂新闻中添加保证金：

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

编辑：

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

gradients.glrzad.com

希望这有帮助，对不起，如果我错过了干扰。

Answer 2

你的这个div正在覆盖按钮

<div class="news">

你能做的是：

你要么加上这个：

<br clear="all"/> //<---add this just above the div class named "news"

或者您可以调整div class news的css：

.news {
   position: relative;
   top: 24%;
 }

CSS按钮悬停/链接仅当您将鼠标悬停在其顶部时

2 个答案: