這是一種使用單個grid和一點flexbox尋址較小區域的方法。.grid-container { display: grid; grid-template-columns: 3fr 1fr 1fr;}.grid-container .item { display: flex; }.right .item { flex-direction: column;}.left .item { margin-bottom: .5rem;}.item [type="text"] { flex-grow: 1;}<div class="grid-container"> <div class="left"> <div class="item"> <button type="button">-</button> <input type="text" value="feature"> </div> <div class="item"> <button type="button">-</button> <input type="text" value="feature"> </div> <div class="item"> <button type="button">-</button> <input type="text" value="feature"> </div> <div class="item"> <button type="button">-</button> <input type="text" value="feature"> </div> <div class="item"> <button type="button">+</button> <input type="text" value="feature"> </div> </div> <div class="center"></div> <div class="right"> <div class="item"> <input type="date"> <button type="button">Borrow</button> </div> </div></div>
3 回答
30秒到達戰場
TA貢獻1828條經驗 獲得超6個贊
如果您希望按鈕的文本也褪色，那么您也可以向該屬性添加過渡。所以，不僅僅是，
transition: border-color 0.4s ease-in;
您還可以擁有：
transition: border-color 0.4s ease-in; transition: color 0.4s ease-in;
請參閱下面的演示：
body {
margin: 0;
background-image: url("https://www.ecopetit.cat/wpic/mpic/1-16867_preview-wallpaper-new-york-usa-night-skyscrapers-new.jpg");
background-size: cover;
background-repeat: no-repeat;
background-color: #999;
}
html {
width: 100%;
height: 100%;
}
.fadebutton {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid;
border-color: white;
text-align: center;
outline: none;
text-decoration: none;
transition: border-color 0.4s ease-out;
transition: color 0.4s ease-out;
}
.fadebutton:hover{
color: #66d8ed;
border-color: #66d8ed;
transition: border-color 0.4s ease-in;
}
.fadebutton:hover *{
transition: color 0.4s ease-in;
}
<script defer src="script.js"></script>
<a class="fadebutton" href="www.google.com">Change color</a>
千巷貓影
TA貢獻1829條經驗 獲得超7個贊
我只需在 .fadebutton 類中聲明所有過渡，然后在 .fadebutton:hover,.fadebutton:active 上聲明我想要進行的更改，例如如下所示。
.fadebutton {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid;
border-color: white;
text-align: center;
outline: none;
text-decoration: none;
transition: all 0.3s ease-in;
}
.fadebutton:hover,
.fadebutton:active {
color: #66d8ed;
border-color: #66d8ed;
}
如果您希望兩個屬性表現不同，我會像這樣獨立指定轉換。
.fadebutton {
display: inline-block;
width: 200px;
padding: 8px;
color: #fff;
border: 2px solid;
border-color: white;
text-align: center;
outline: none;
text-decoration: none;
transition: color 0.3s ease-in;
transition: border-color 0.3s ease-out;
}
.fadebutton:hover,
.fadebutton:active {
color: #66d8ed;
border-color: #66d8ed;
}
幕布斯7119047
TA貢獻1794條經驗 獲得超8個贊
您只需要更改正文的背景顏色，以便您的按鈕顯示懸停選擇器工作正常，這只是顏色問題！嘗試這段代碼并更改它以滿足您的需求，希望我有所幫助。
body {
margin: 0;
background-color:black;
background-size: cover;
background-repeat: no-repeat;
}
html {
width: 100%;
height: 100%;
}
.fadebutton {
display: inline-block;
width: 200px;
padding: 8px;
background-color:white;
color: black;
border: 2px solid;
border-color: white;
text-align: center;
outline: none;
text-decoration: none;
transition: border-color 0.3s ease-out;
}
.fadebutton:hover,
.fadebutton:active {
color: #66d8ed;
border-color: #66d8ed;
transition: border-color 0.4s ease-in;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kell</title>
<link rel="stylesheet" href="style.css" />
<script defer src="script.js"></script>
</head>
<body>
<a class="fadebutton" href="www.google.com">Change color</a>
</body>
</html>
- 3 回答
- 0 關注
- 164 瀏覽
添加回答
舉報
0/150
提交
取消