按钮可见性取决于输入焦点答案

【问题标题】：Button visibility depending on inputs focus按钮可见性取决于输入焦点
【发布时间】：2017-11-28 12:22:37
【问题描述】：

我有 DOM：

<input type='text'>
<button>Add</button>

和 CSS：

button {
    visibility: hidden;
}

input:focus + button {
    visibility: visible;
}

这里我们可以看到我们的按钮只有在输入元素被聚焦时才可见。我已经为按钮添加了点击监听器，但它不起作用。

但如果向按钮添加过渡效果，它会起作用。但不幸的是，只能转换 IE10+。

button {
    transition: visibility 1s ease;
}

问题：是否有另一种 css 方式来解决这个问题（没有 javascripts 焦点/模糊）？

【问题讨论】：

【解决方案1】：

您可以使用opacity 代替visibility。它至少触发按钮的单击事件。

button {
    opacity:0;
}

input:focus + button {
    opacity:1;
}

<input type='text'>
<button onclick="alert('Hello')">Add</button>

【讨论】：

【解决方案2】：

你的问题是，当你点击按钮时，输入失去焦点，按钮立即消失，所以它永远不会收到点击。在这种情况下，我建议使用一点 transition-delay 并添加 button:focus 类，例如：

input:focus + button,
button:focus {
    visibility: visible;
}

button {
    transition: visibility 0s ease 50ms;
}

这将使您的按钮在失去对输入的焦点后保持可见 50 毫秒（因此您有额外的 50 毫秒来注册点击），然后当按钮获得焦点时，它不会消失，因为我们添加了另一个 CSS防止这种情况发生的条件。

这不是最好的解决方案，但在不使用 JavaScript 的情况下，这是你能得到的最接近的解决方案。

【讨论】：

谢谢。但是过渡在 IE9 中不起作用。 caniuse.com/css-transitions/embed
我不知道你有什么要求，但你应该知道IE9只占现在使用的所有浏览器的0.2%。而且一年前微软宣布终止对 IE10、9 和 8 的支持，那你的网站为什么要支持连它的生产商都不支持的浏览器呢。