我试图让一个按钮在整个输入元素上完全展开。我似乎无法弄清楚。我试过使用 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">×</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">×</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>
感谢任何帮助,谢谢。
最佳答案
你完全可以把按钮放在 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">×</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>
关于javascript - 悬停时按钮重叠输入 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44441871/