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

我有 DOM:

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

和CSS:

button {
    visibility: hidden;
}

input:focus + button {
    visibility: visible;
}

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

但是如果向按钮添加过渡，它就可以了。但不幸的是只能过渡 IE10+。

button {
    transition: visibility 1s ease;
}

问题:是否有另一种 css 方法可以实现此目的(无需 javascript 焦点/模糊)？

最佳答案

那么您可以使用不透明度而不是可见性。它至少会触发按钮的单击事件。

button {
    opacity:0;
}

input:focus + button {
    opacity:1;
}

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

关于javascript - 按钮可见性取决于输入焦点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44746539/