Question

我试图编码一个按钮，在悬停时调整其宽度。

初始状态： - 将标志作为背景（位置中心）

州悬停： - 游戏应该向左（位置左中心） - 它的工作原理！ - 调整大小区域的中心出现一些标题（我在这里使用不透明度）

仅使用CSS - 过渡功能。

当我从按钮移出鼠标光标时，一切都很好，即背景（播放标志）立即转到中心位置。

我希望在完成动画之后不要在最开始时这样做。

这是我的代码

HTML：

<article class="buttons clearfix">
    <div id="play"><a href="#" class="hide">Click</a></div>
</article>

CSS：

   .buttons #play {
    float: left;
    margin-right: 20px;
    width: 50px;
    height: 50px;
    cursor: pointer; }
   buttons #play:hover {
      outline: 1px solid #84bd21; }

  .buttons #play {
    background: #019c43 url(http://i57.tinypic.com/ji10l3.png) no-repeat center center;
    text-align: center;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -ms-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out; }

    .buttons #play:hover {
      width: 200px;
      background: #019c43 url(http://i57.tinypic.com/ji10l3.png) no-repeat left center; }

    .buttons #play a {
        text-decoration: none;
      font-size: 1.4em;
      display: block;
      line-height: 50px;
      color: #fff;
      opacity: 0;
      -webkit-transition: opacity 0.3s linear;
      -moz-transition: opacity 0.3s linear;
      -ms-transition: opacity 0.3s linear;
      transition: opacity 0.3s linear; }
      .buttons #play a:hover {
        opacity: 1; }

http://jsfiddle.net/k3p0n66b/57

我也使用jQuery方法悬停，动画，延迟但效果（也使用回调函数）类似，鼠标离开时背景立即转到中心位置。

你知道出了什么问题吗？

Answer 1

我删除了重复的背景规则（来自:hover的规则），而不是center center我放了10px center：

background: #019c43 url(http://i57.tinypic.com/ji10l3.png) no-repeat 10px center;

演示：

.buttons #play {
    float: left;
    margin-right: 20px;
    width: 50px;
    height: 50px;
    cursor: pointer;
}
buttons #play:hover {
    outline: 1px solid #84bd21;
}
.buttons #play {
    background: #019c43 url(http://i57.tinypic.com/ji10l3.png) no-repeat 10px center;
    text-align: center;
    -webkit-transition: width 0.5s ease-in-out;
    -moz-transition: width 0.5s ease-in-out;
    -ms-transition: width 0.5s ease-in-out;
    transition: width 0.5s ease-in-out;
}
.buttons #play:hover {
    width: 200px;
}
.buttons #play a {
    text-decoration: none;
    font-size: 1.4em;
    display: block;
    line-height: 50px;
    color: #fff;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -ms-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}
.buttons #play a:hover {
    opacity: 1;
}

<article class="buttons clearfix">
    <div id="play"><a href="#" class="hide">Click</a>
    </div>
</article>

Answer 2

我将箭头更改为固定在左侧（注意背景规则中的10px）。

.buttons #play {
background: #019c43 url(http://i57.tinypic.com/ji10l3.png) no-repeat 10px center;
text-align: center;
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out; }

实施例： http://jsfiddle.net/k3p0n66b/59/

jQuery Button在悬停时调整大小

2 个答案: