这是一种使用单个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 关注
- 119 浏览
添加回答
举报
0/150
提交
取消