按钮可见性取决于输入焦点
按钮可见性取决于输入焦点
提问于 2017-06-25 20:51:09
我有DOM：
<input type='text'>
<button>Add</button>和CSS：
button {
visibility: hidden;
}
input:focus + button {
visibility: visible;
}在这里我们可以看到，只有当输入元素被聚焦时，我们的按钮才可见。我已经向按钮添加了click listener，但它不起作用。
但是，如果要添加过渡到按钮，它可以工作。但不幸的是，它只转换了IE10+。
button {
transition: visibility 1s ease;
}问:有没有其他的css方法来解决这个问题(没有javascripts的焦点/模糊)？
回答 2
Stack Overflow用户
发布于 2017-06-25 21:02:09
好吧，你可以用opacity代替visibility。它至少激发了button的click事件。
button {
opacity:0;
}
input:focus + button {
opacity:1;
}<input type='text'>
<button onclick="alert('Hello')">Add</button>
Stack Overflow用户
发布于 2017-06-25 21:04:40
你的问题是，当你点击按钮时，输入失去焦点，按钮立即消失，因此它永远不会收到点击。在这种情况下，我建议使用一个小transition-delay并添加button:focus类，例如：
input:focus + button,
button:focus {
visibility: visible;
}
button {
transition: visibility 0s ease 50ms;
}这将使你的按钮在失去焦点后保持50毫秒可见(所以你有额外的50毫秒时间来注册点击)，然后当按钮被聚焦时，它不会消失，因为我们添加了另一个CSS条件来防止这种情况发生。
这不是最好的解决方案，但如果不使用JavaScript，这就是最接近的解决方案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44746539
复制相关文章
相似问题
腾讯云开发者
