將過渡效果添加到按鈕不起作用

-1

我已將一個transition效果添加到按鈕，但它不起作用。背景顏色是白色的;通過添加過渡效果，顏色應該從下往上移動，但不影響。這是fiddle link。這是代碼：將過渡效果添加到按鈕不起作用

.hourlypricing { 
 
    background: #57c1e8; 
 
    border: .2rem solid #57c1e8; 
 
    min-width: 16.5rem; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 6rem; 
 
    margin-left: 265px; 
 
    line-height: 5.6rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    white-space: nowrap; 
 
    font-size: 1.4rem; 
 
    padding: 0 2.5rem; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    text-decoration: none !important; 
 
    -webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out; 
 
    transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out; 
 
} 
 

 
button.monthlypricing { 
 
    margin-left: 50px; 
 
    background: #fff; 
 
    border: .2rem solid #57c1e8; 
 
    min-width: 16.5rem; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 6rem; 
 
    line-height: 5.6rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    white-space: nowrap; 
 
    font-size: 1.4rem; 
 
    padding: 0 2.5rem; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    color: #000; 
 
    text-decoration: none !important; 
 
    -webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out; 
 
    transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out; 
 
}

<div class="hourly"> 
 
    <button class="hourlypricing">Hourly Pricing</button> 
 
    <span class="FyfR" data-reactid="5">or</span> 
 
    <button class="monthlypricing">Monthly Pricing</button> 
 
</div>

來源

2017-10-05 user8725518

_When_應該轉變發生的？你沒有具體說明。 – Xufox

也許你想要動畫？ –

@Xufox當用戶將鼠標懸停在每月定價上時，它應該改變背景顏色，顏色應該從下到上滑動 – user8725518

您可以通過使用transform: scaleY()和transform-origin。檢查下面的代碼片段以供參考。

.hourlypricing { 
 
    background: #57c1e8; 
 
    border: .2rem solid #57c1e8; 
 
    min-width: 16.5rem; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 6rem; 
 
    margin-left: 265px; 
 
    line-height: 5.6rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    white-space: nowrap; 
 
    font-size: 1.4rem; 
 
    padding: 0 2.5rem; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    text-decoration: none !important; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.hourlypricing:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
    transition: transform 1s; 
 
    transform-origin: top center; 
 
    transform: scaleY(0); 
 
    z-index: -1; 
 
} 
 

 
.hourlypricing:hover:after { 
 
    transform: scaleY(1); 
 
} 
 

 
button.monthlypricing { 
 
    margin-left: 50px; 
 
    background: #fff; 
 
    border: .2rem solid #57c1e8; 
 
    min-width: 16.5rem; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 6rem; 
 
    line-height: 5.6rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    white-space: nowrap; 
 
    font-size: 1.4rem; 
 
    padding: 0 2.5rem; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    color: #000; 
 
    text-decoration: none !important; 
 
    -webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out; 
 
    transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out; 
 
}

<div class="hourly"> 
 
    <button class="hourlypricing">Hourly Pricing</button> 
 
    <span class="FyfR" data-reactid="5">or</span> 
 
    <button class="monthlypricing">Monthly Pricing</button> 
 
</div>

更新：對於需要使用腳本激活按鈕。檢查下面的代碼片段以供參考。

$('button').click(function() { 
 
    $('button').removeClass('active'); 
 
    $(this).addClass('active'); 
 
});

button.active { 
 
    background: #57c1e8 !important; 
 
} 
 

 
button:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
    transition: transform 1s; 
 
    transform-origin: top center; 
 
    transform: scaleY(0); 
 
    z-index: -1; 
 
} 
 

 
button:hover:after { 
 
    transform: scaleY(1); 
 
} 
 

 
button.active:hover:after { 
 
    transform: scaleY(0); 
 
} 
 

 
button { 
 
    background: #fff; 
 
    border: .2rem solid #57c1e8; 
 
    min-width: 16.5rem; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 6rem; 
 
    line-height: 5.6rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    white-space: nowrap; 
 
    font-size: 1.4rem; 
 
    padding: 0 2.5rem; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    color: #000; 
 
    text-decoration: none !important; 
 
    -webkit-transition: background-color .1s ease-in-out, color .1s ease-in-out, -webkit-box-shadow .1s ease-in-out; 
 
    transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
button.monthlypricing { 
 
    margin-left: 50px; 
 
} 
 

 
button.hourlypricing { 
 
    margin-left: 265px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hourly"> 
 
    <button class="hourlypricing active">Hourly Pricing</button> 
 
    <span class="FyfR" data-reactid="5">or</span> 
 
    <button class="monthlypricing">Monthly Pricing</button> 
 
</div>

來源

2017-10-05 16:05:19

-1

你不改變任何價值

https://www.w3schools.com/css/css3_transitions.asp

CSS轉換可以讓你從一個值到另一個平滑地改變屬性值。

.hourlypricing { 
 
    background: #57c1e8; 
 
    transition: background-color .1s ease-in-out; 
 
} 
 

 
.hourlypricing:hover { 
 
    background: red; 
 
}

來源

2017-10-05 10:29:02 jtrolle

添加代碼片段時，您必須輸入完整代碼...或者使用**代碼**代碼代替 –

如果我點擊運行代碼片段 – user8725518

@ user8725518，則不顯示任何結果當然。代碼片段不包含HTML，但它包含了一些可以幫助您的CSS。 – Xufox

移動轉換定義一個單獨的部分.hourlypricing:hover像這樣（我也已經設立了一個躍遷時間爲1秒爲更好的可見性）：

.hourlypricing 
 
\t { 
 
    background: #57c1e8; 
 
    border: .2rem solid #57c1e8; 
 
    min-width: 16.5rem; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 6rem; 
 
\t margin-left:265px; 
 
    line-height: 5.6rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    white-space: nowrap; 
 
    font-size: 1.4rem; 
 
    padding: 0 2.5rem; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    text-decoration: none !important;} 
 
    
 
.hourlypricing:hover {  
 
\t -webkit-transition: background-color .1s ease-in-out,color .1s ease-in-out,-webkit-box-shadow .1s ease-in-out; 
 
    transition: background-color 1s ease-in-out,color 1s ease-in-out,box-shadow 1s ease-in-out; 
 
    background-color: red; 
 
    } 
 
    
 
\t button.monthlypricing 
 
\t { 
 
    margin-left: 50px; 
 
\t background:#fff; 
 
\t border: .2rem solid #57c1e8; 
 
    min-width: 16.5rem; 
 
    display: inline-block; 
 
    text-align: center; 
 
    height: 6rem; 
 
\t line-height: 5.6rem; 
 
    text-transform: uppercase; 
 
    letter-spacing: .1em; 
 
    white-space: nowrap; 
 
    font-size: 1.4rem; 
 
    padding: 0 2.5rem; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
\t color:#000; 
 
    text-decoration: none !important; 
 
\t -webkit-transition: background-color .1s ease-in-out,color .1s ease-in-out,-webkit-box-shadow .1s ease-in-out; 
 
    transition: background-color .1s ease-in-out,color .1s ease-in-out,box-shadow .1s ease-in-out; 
 
    }

<div class="hourly">       \t \t 
 
\t \t \t \t \t \t <button class="hourlypricing">Hourly Pricing</button> 
 
\t \t \t \t \t \t <span class="FyfR" data-reactid="5">or</span> 
 
\t \t \t \t \t \t <button class="monthlypricing">Monthly Pricing</button> 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t 
 
\t \t \t \t </div>

來源

2017-10-05 12:12:50

過渡效果應該從下往上移動 – user8725518

將過渡效果添加到按鈕不起作用

回答

相關問題