將鼠標懸停在按鈕上會顯示不太寬的文本。如何防止更改按鈕寬度？

Question

我想知道我怎麼能有一個按鈕保持其懸停寬度。我想使用css進行轉換，而不是使用jQuery解決方案。

那麼我該如何做到這一點？如果有純粹的css實現，我會喜歡它，但如果必須的話，我會解決jQuery問題。

編輯：由於按鈕文本是動態的，因此最小寬度將不起作用。

這裏有一個fiddle.

$(function() { 
 
    $('button') 
 
    .on('mouseover', function() { 
 
     $(this).find('.btn-text').toggleClass('hidden'); 
 
     $(this).find('.options').toggleClass('hidden'); 
 
    }) 
 
    .on('mouseout', function() { 
 
     $(this).find('.btn-text').toggleClass('hidden'); 
 
     $(this).find('.options').toggleClass('hidden'); 
 
    }); 
 
});

button { 
 
    height: 60px; 
 
    padding: 0 25px; 
 
    line-height: 60px; 
 
    background-size: 100% 200%; 
 
    transition: all 0.1s; 
 
    background-image: linear-gradient(to top, green 50%, white 50%); 
 
} 
 
button:hover { 
 
    color: white; 
 
    background-position: 0 100%; 
 
} 
 
.options { 
 
    font-size: 13px; 
 
} 
 
.hidden { 
 
    display: none; 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button type="button"> 
 
    <span class="btn-text">Button Thing</span> 
 
    <span class="options hidden">Go</span> 
 
</button>

Answer 1

需要修復的寬度：width:25%;在.button

結果：jsfiddle

.button{ 
height: 60px; 
padding: 0 25px; 
line-height: 60px; 
background-size: 100% 200%; 
transition: all 0.1s; 
background-image: linear-gradient(to top, green 50%, white 50%); 
    width:25%; 
} 

Answer 2

最簡單的解決方案可能是添加以下jQuery，在該按鈕中添加內聯寬度。

$(function() { 
 
    $('button') 
 
    var width = $(this).width(); 
 
    .on('mouseover', function() { 
 
     $(this).css('width',width); 
 
     $(this).find('.btn-text').toggleClass('hidden'); 
 
     $(this).find('.options').toggleClass('hidden'); 
 
    }) 
 
    .on('mouseout', function() { 
 
     $(this).find('.btn-text').toggleClass('hidden'); 
 
     $(this).find('.options').toggleClass('hidden'); 
 
    }); 
 
});

button { 
 
    height: 60px; 
 
    padding: 0 25px; 
 
    line-height: 60px; 
 
    background-size: 100% 200%; 
 
    transition: all 0.1s; 
 
    background-image: linear-gradient(to top, green 50%, white 50%); 
 
} 
 
button:hover { 
 
    color: white; 
 
    background-position: 0 100%; 
 
} 
 
.options { 
 
    font-size: 13px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 

 
} 
 
.hidden { 
 
    display: none; 
 
    visibility: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button type="button"> 
 
    <span class="btn-text">Button Thing</span> 
 
    <span class="options hidden">Go</span> 
 
</button>

Answer 3

添加CSS解決方案，因爲我的jQuery的解決方案並沒有正常工作。

我將.hidden類更改爲使用不透明度，然後絕對放置選項文本。只有當選項文本總是比初始文本短時，這纔會起作用。

jsfiddle

button{ 
    height: 60px; 
    padding: 0 25px; 
    line-height: 60px; 
    background-size: 100% 200%; 
    transition: all 0.1s; 
    background-image: linear-gradient(to top, green 50%, white 50%); 
    position: relative; 
} 

button:hover { 
    color: white; 
    background-position: 0 100%; 
} 
.options{ 
    font-size: 13px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

.hidden{ 
    opacity: 0; 
}