CSS：悬停选择器不适用于按钮
这是一种使用单个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>
Cats萌萌3回答
-
30秒到达战场
如果您希望按钮的文本也褪色，那么您也可以向该属性添加过渡。所以，不仅仅是，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> -
千巷猫影
我只需在 .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
您只需要更改正文的背景颜色，以便您的按钮显示悬停选择器工作正常，这只是颜色问题！尝试这段代码并更改它以满足您的需求，希望我有所帮助。 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>
随时随地看视频慕课网APP
相关分类
Html5