javascript - 悬停时按钮重叠输入 100%

Question

我试图让一个按钮在整个输入元素上完全展开。我似乎无法弄清楚。我试过使用 absolute:position;这似乎没有用，我尝试了一些其他方法，这些方法似乎比我可能需要的更复杂，但大部分都不起作用

这是我目前的代码:

  .s-btn {width:40px;height:40px;}
  
  .expand > span {display:none;}  
  .expand:hover > span {display:inline-block;}
  .expand:hover {width:100%;}
  
  .transition {
    /*Transition*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    transition: All 0.5s ease;  
  }

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-container">
  <h2>Help</h2>
  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Test Modal for Help Button</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container" style="overflow:hidden;padding:50px 0;">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-hover-red w3-display-topright">&times;</span>
        <form class="w3-container" style="width:80%;margin:0 auto;">          
          <!-- Trouble Area: -->
          <button class="w3-button expand s-btn transition w3-deep-purple"><span>What's my company code</span>?</button>
          <input class="w3-input w3-border" name="message" type="text" placeholder="Company Code">
          <!-- END: -->
          <button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding">Submit</button>     
        </form>
      </div>
    </div>
  </div>
</div>

这里按钮扩展到 100%，就像我正在寻找的那样，但我想让它扩展到输入字段的顶部。

下面是一个我希望它看起来如何但当然要实现输入字段全宽的示例。

<style>
  .s-btn {width:40px;height:40px;}
  
  .expand > span {display:none;}  
  .expand:hover > span {display:inline-block;}
  .expand:hover {width:250px;}
  
  .transition {
    /*Transition*/
    -webkit-transition: All 0.5s ease;
    -moz-transition: All 0.5s ease;
    -o-transition: All 0.5s ease;
    -ms-transition: All 0.5s ease;
    transition: All 0.5s ease;  
  }

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-container">
  <h2>Help</h2>
  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Test Modal for Help Button</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container" style="overflow:hidden;padding:50px 0;">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-hover-red w3-display-topright">&times;</span>
        <form class="w3-container" style="width:80%;margin:0 auto;">          
          <div class="w3-row w3-section">
            <div class="w3-col" style="width:50px;"><button class="w3-button expand s-btn transition w3-deep-purple"><span>What's my company code</span>?</button></div>
            <div class="w3-rest">
              <input class="w3-input w3-border" name="message" type="text" placeholder="Company Code">
            </div>
          </div>
          <button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding">Submit</button>     
        </form>
      </div>
    </div>
  </div>
</div>

感谢任何帮助，谢谢。

Answer 1

你完全可以把按钮放在 input 的左边，并在 :hover 上触发宽度变化，它会扩展到 input

.s-btn {
  width: 40px;
  height: 40px;
  position: absolute;
}

.s-btn + .w3-input {
  margin-left: 45px;
  width: auto;
  width: calc(100% - 45px);
}

.w3-container {
  position: relative;
}

.expand > span {
  display: none;
}
.expand:hover > span {
  display: inline-block;
}

.expand:hover {
  width: calc(100% - 32px);
  z-index: 1;
}

.transition {
  /*Transition*/
  -webkit-transition: All 0.5s ease;
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  -ms-transition: All 0.5s ease;
  transition: All 0.5s ease;
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-container">
  <h2>Help</h2>
  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Test Modal for Help Button</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container" style="overflow:hidden;padding:50px 0;">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-hover-red w3-display-topright">&times;</span>
        <form class="w3-container" style="width:80%;margin:0 auto;">          
          <!-- Trouble Area: -->
          <button class="w3-button expand s-btn transition w3-deep-purple"><span>What's my company code</span>?</button>
          <input class="w3-input w3-border" name="message" type="text" placeholder="Company Code">
          <!-- END: -->
          <button class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding">Submit</button>     
        </form>
      </div>
    </div>
  </div>
</div>