猿问

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萌萌
浏览 120回答 3
3回答

30秒到达战场

如果您希望按钮的文本也褪色，那么您也可以向该属性添加过渡。所以，不仅仅是，transition: border-color 0.4s ease-in;您还可以拥有：transition:&nbsp;border-color&nbsp;0.4s&nbsp;ease-in; transition:&nbsp;color&nbsp;0.4s&nbsp;ease-in;请参阅下面的演示：body {&nbsp; margin: 0;&nbsp; background-image: url("https://www.ecopetit.cat/wpic/mpic/1-16867_preview-wallpaper-new-york-usa-night-skyscrapers-new.jpg");&nbsp; background-size: cover;&nbsp; background-repeat: no-repeat;&nbsp; background-color: #999;}html {&nbsp; width: 100%;&nbsp; height: 100%;}.fadebutton {&nbsp; display: inline-block;&nbsp; width: 200px;&nbsp; padding: 8px;&nbsp; color: #fff;&nbsp; border: 2px solid;&nbsp; border-color: white;&nbsp; text-align: center;&nbsp; outline: none;&nbsp; text-decoration: none;&nbsp; transition: border-color 0.4s ease-out;&nbsp;&nbsp;&nbsp; transition: color 0.4s ease-out;}.fadebutton:hover{&nbsp; color: #66d8ed;&nbsp;&nbsp;&nbsp; border-color: #66d8ed;&nbsp; transition: border-color 0.4s ease-in;}.fadebutton:hover *{&nbsp; transition: color 0.4s ease-in;}<script defer src="script.js"></script><a class="fadebutton" href="www.google.com">Change color</a>
0

千巷猫影

我只需在 .fadebutton 类中声明所有过渡，然后在 .fadebutton:hover,.fadebutton:active 上声明我想要进行的更改，例如如下所示。&nbsp; &nbsp; .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;}如果您希望两个属性表现不同，我会像这样独立指定转换。&nbsp; &nbsp; &nbsp; &nbsp;.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;}
0

幕布斯7119047

您只需要更改正文的背景颜色，以便您的按钮显示悬停选择器工作正常，这只是颜色问题！尝试这段代码并更改它以满足您的需求，希望我有所帮助。&nbsp; &nbsp;body {&nbsp; margin: 0;&nbsp;background-color:black;&nbsp; background-size: cover;&nbsp; background-repeat: no-repeat;}html {&nbsp; width: 100%;&nbsp; height: 100%;}.fadebutton {&nbsp; display: inline-block;&nbsp; width: 200px;&nbsp; padding: 8px;&nbsp; background-color:white;&nbsp; color: black;&nbsp; border: 2px solid;&nbsp; border-color: white;&nbsp; text-align: center;&nbsp; outline: none;&nbsp; text-decoration: none;&nbsp; transition: border-color 0.3s ease-out;}.fadebutton:hover,.fadebutton:active {&nbsp; color: #66d8ed;&nbsp; border-color: #66d8ed;&nbsp; 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>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答