jQuery按钮在悬停时调整大小

我试图编写一个按钮，在悬停时调整其宽度。jQuery按钮在悬停时调整大小

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

国家悬停： - 发挥应该向左走（位置向左中心） - 它的作品！ - 某些标题出现在调整大小区域的中心（我在这里使用的是不透明度）

这是仅用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方法徘徊，动画，延迟，但效果（也使用回调函数）类似的背景立即去ce在鼠标离开时的中心位置。

你知道什么是错的吗？

来源

2014-10-22 kuba0506

我删除重复的背景规则（一个来自: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>

来源

2014-10-22 06:31:10

这是一个很好的解决方案！但是我发现了另一个小问题。当我将line-height = div的高度设置为垂直居中时，标题“a”下面的区域会从50到100px变长，因此可点击区域也会变为低于链接。你知道如何删除它吗？（没有行高是可以的） – kuba0506 2014-10-22 06:37:33

@ kuba0506添加jsfiddle。使用注释很难调试。 :-) – 2014-10-22 06:41:54

我认为这是一个浏览器错误，因为在jsfiddle中这似乎工作正常，所以thx再次为您的帮助， – kuba0506 2014-10-22 06:51:47

我改变了箭头被固定到左边（注意背景规则中的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/

来源

2014-10-22 06:32:02 michaelbn

jQuery按钮在悬停时调整大小

回答

相关问题