当悬停

Question

我试图让一个按钮在输入元素上完全展开。我似乎无法弄明白。我尝试过使用绝对：位置;而且似乎没有用，而且我尝试了一些其他方法，这些方法似乎比我可能需要的更复杂，并且大部分都不起作用

这是我目前的代码：

＆＃13;

＆＃13;

  .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;  
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这里的按钮扩展到100％，就像我正在寻找但我希望它在输入字段之上展开。

以下是我希望如何查看的示例，但当然会实现输入字段的整个宽度。

＆＃13;

＆＃13;

<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;  
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

感谢任何帮助，谢谢。

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>