按鈕知名度重點

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。它至少會觸發按鈕的點擊事件。

button { 
 
    opacity:0; 
 
} 
 

 
input:focus + button { 
 
    opacity:1; 
 
}

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

Answer 2

你的問題是，當你點擊按鈕，輸入失去焦點和按鈕立即消失，所以它永遠不會獲得點擊。在這種情況下，我會建議使用一個小transition-delay並添加button:focus類，例如像：

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

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

這將輸入失去焦點後，讓你的按鈕可見額外的50毫秒（讓你有額外的50毫秒到獲得點擊註冊），然後當按鈕被聚焦時，它不會消失，因爲我們添加了另一個CSS條件來防止這種情況。

這不是最好的解決方案，但不使用JavaScript，這是最接近你可以得到的。