Question

编辑：当你悬停时我需要它慢慢显示为蓝色，而不是立即显示。这是css：

.button {
    text-decoration:none;
    text-align:center;
    padding:40px 40px;
    border:none;
    font:18px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#392a23;
    background-color:#a2a2a2;
    background-image: -moz-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    background-image: -webkit-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    background-image: -o-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    background-image: -ms-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#464646', GradientType=0);
    background-image: linear-gradient(top, #a2a2a2 0%, #464646 100%);
    -webkit-box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    -moz-box-shadow: 0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    text-shadow: 0px 2px 2px #909090;
    filter: dropshadow(color=#909090, offx=0, offy=2);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.button {
    text-decoration:none;
    text-align:center;
    padding:40px 40px;
    border:none;
    font:18px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#392a23;
    background-color:#a2a2a2;
    background-image: -moz-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    background-image: -webkit-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    background-image: -o-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    background-image: -ms-linear-gradient(top, #a2a2a2 0%, #464646 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464646', endColorstr='#464646', GradientType=0);
    background-image: linear-gradient(top, #a2a2a2 0%, #464646 100%);
    -webkit-box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    -moz-box-shadow: 0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    text-shadow: 0px 2px 2px #909090;
    filter: dropshadow(color=#909090, offx=0, offy=2);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.button:hover {
    padding:40px 40px;
    border:none;
    font:18px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#372d2f;
    background-color:#00aeff;
    background-image: -moz-radial-gradient(bottom, #00aeff 0%, #000e4a 100%);
    background-image: -webkit-radial-gradient(bottom, #00aeff 0%, #000e4a 100%);
    background-image: -o-radial-gradient(bottom, #00aeff 0%, #000e4a 100%);
    background-image: -ms-radial-gradient(bottom, #00aeff 0%, #000e4a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000e4a', endColorstr='#000e4a', GradientType=0);
    background-image: radial-gradient(bottom, #00aeff 0%, #000e4a 100%);
    -webkit-box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    -moz-box-shadow: 0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    text-shadow: 0px 2px 2px #3098d9;
    filter: dropshadow(color=#3098d9, offx=0, offy=2);
}
.button:active {
    padding:40px 40px;
    border:none;
    font:18px Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#313131;
    background:#606060;
    -webkit-box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    -moz-box-shadow: 0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    box-shadow:0px 0px -20px #bababa, inset 0px 0px -20px #ffffff;
    -webkit-transition: all 0.5s ease-in-out;
    text-shadow: 0px 2px 2px #777777;
    filter: dropshadow(color=#777777, offx=0, offy=2);
}

这是html：

<a href="#" class="button">Home</a> 
<a href="#" class="button">Games</a>

我尝试了transition: all 500ms linear; transition-delay: 1ms;和-webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out

但没有一个延迟或缓慢悬停。它不工作！缓慢的悬停是现在唯一的问题。

Answer 1

这取决于您正在搜索的内容以及您的标记。无论如何，我将使用的两个主要替代方案是：

一个。使它们成为内联块（如果它们是块或内联元素），然后最终应用vertical-align：middle，如果需要的话。

.button{
   display:inline-block;
   vertical-align:middle;
}

湾使它们成块或内联块元素并向左浮动。在这种情况下，您可能还需要在容器上添加一些clearfix样式，或者在按钮之前/之后添加clearfix div。同样，如果您甚至提供您的标记和更详细的描述，我们可以提供更多帮助，更具体。

.button{
   display:inline-block;
   float:left;
}

Answer 2

要在排列内联块时排除空白区域问题，常见的解决方法是给父元素font-size: 0;并将字体大小重置为排列的内联块所需的任何内容。

http://jsfiddle.net/a6j3ezt3/4/

Answer 3

删除按钮之间的间隙，并使用以下CSS将它们包装在DIV中

<div id="posbuttons">
   <a href="#" class="button">Home</a><a href="#" class="button">Games</a>
</div>

#posbuttons{
    position:relative;
    text-align:center;
    top:40px;
    margin:auto;
}

jsfiddle for demo：http://jsfiddle.net/0krfzfbr/1/

如何减慢悬停按钮并将它们对齐到特定位置

3 个答案: