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按鈕在懸停時調整大小

回答

相關問題