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

Question

我有DOM：

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

和CSS：

button {
    visibility: hidden;
}

input:focus + button {
    visibility: visible;
}

在这里我们可以看到只有当输入元素被聚焦时我们的按钮才可见。我已经在按钮上添加了点击监听器，但它无法正常工作。

但是如果要将按钮添加到按钮，它就能正常工作。但不幸的是只转换IE10 +。

button {
    transition: visibility 1s ease;
}

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

Answer 1

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

＆＃13;

＆＃13;

button {
    opacity:0;
}

input:focus + button {
    opacity:1;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

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

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

这不是最佳解决方案，但如果不使用JavaScript，这是您可以获得的最接近的解决方案。