可點擊元素上的 CSS (*[onclick]:hover)

Question

當它們懸停時，我想使用樣式我的可點擊元素（javascript 函數 onclick）。 到目前為止，我有這個：

*[onclick]:hover{
    background-color: red ;
    color: blue;
}

正如您所看到的，它適用於我的大多數元素：

 document.getElementById('C').onclick = function(){alert('I am clickable too !')}

 div { background-color: green ; margin : 2px } *[onclick]:hover{ background-color: red ; color: blue; }

 <div id="A" onclick='alert("A")'>Click me ! A</div> <div id="B" onclick='alert("B")'>Click me ! B</div> <div id="notAclickableElement" >Don't click me :( Z</div> <div id="C" >Click me ! C</div> <div id="D" onclick='alert("D")'>Click me ! D</div>

但它僅適用於在 Html 頁面中編寫 onclick 函數的元素，而不是通過 Javascript 添加。 有沒有辦法正確選擇所有可點擊元素？

Answer 1

瀏覽器知道一些默認情況下可以單擊的元素，例如<a>和<button>元素。 如果您希望用戶單擊它們，那么使用這些元素通常是一個很好的做法，因為它們幾乎不需要修改。

除此之外，您可以只向元素添加一個類來定位它們，因為沒有可以單擊的元素的選擇器。

但是，向可單擊的元素添加tabindex屬性是一個很好的做法，因為它使它們可聚焦。 沒有鼠標的用戶（它們存在）可以使用Tab鍵在可點擊元素之間循環，然后使用Enter或Spacebar 來點擊它們。 第一段中提到的元素已經在本地包含了這一點。 對於<div>元素，您必須手動添加此行為。

下面的示例針對具有類的所有可點擊元素，並為重點樣式添加:focus選擇器。

 document.getElementById('C').onclick = function() { alert('I am clickable too !') }

 div { background-color: green; margin: 2px } .clickable:hover { background-color: red; color: blue; } .clickable:focus { background-color: blue; color: red; }

 <div id="A" class="clickable" onclick='alert("A")' tabindex="0">Click me ! A</div> <div id="B" class="clickable" onclick='alert("B")' tabindex="0">Click me ! B</div> <div id="notAclickableElement">Don't click me :( Z</div> <div id="C" class="clickable" tabindex="0">Click me ! C</div> <div id="D" class="clickable" onclick='alert("D")' tabindex="0">Click me ! D</div>

Answer 2

當然。 只需刪除 CSS 中的[onclick] 。

 document.getElementById('C').onclick = function(){alert('I am clickable too !')}

 div { background-color: green ; margin : 2px } *:hover{ background-color: red ; color: blue; }

 <div id="A" onclick='alert("A")'>Click me ! A</div> <div id="B" onclick='alert("B")'>Click me ! B</div> <div id="notAclickableElement" >Don't click me :( Z</div> <div id="C" >Click me ! C</div> <div id="D" onclick='alert("D")'>Click me ! D</div>

然而，這也改變了背景，所以我們可以為 div 指定一個特定的類，如下所示：

 document.getElementById('C').onclick = function(){alert('I am clickable too !')}

 div { background-color: green ; margin : 2px } .hoverme:hover{ background-color: red ; color: blue; }

 <div class="hoverme" id="A" onclick='alert("A")'>Click me ! A</div> <div class="hoverme" id="B" onclick='alert("B")'>Click me ! B</div> <div class="hoverme" id="notAclickableElement" >Don't click me :( Z</div> <div class="hoverme" id="C" >Click me ! C</div> <div class="hoverme" id="D" onclick='alert("D")'>Click me ! D</div>

將懸停指定給單個類會更有效率，因為您可以為不同的事物定義不同的懸停效果。 您所要做的就是添加class="hoverme"

Answer 3

您可以在 CSS 中使用 .class。

 document.getElementById('C').onclick = function(){alert('I am clickable too !')}

 div { background-color: green ; margin : 2px } *[onclick]:hover{ background-color: red ; color: blue; } .click { background-color: green; } .click:hover { background-color: red; }

 <div class="click" id="A" onclick='alert("A")'>Click me ! A</div> <div id="B" onclick='alert("B")'>Click me ! B</div> <div class="click" id="notAclickableElement" >Don't click me :( Z</div> <div class="click" id="C" >Click me ! C</div> <div class="click" id="D" onclick='alert("D")'>Click me ! D</div>

Answer 4

我希望我有所幫助

 var x = document.querySelectorAll("div"); for (let i = 0; i < x.length; i++) { if (x[i].id !== 'notAclickableElement') { x[i].setAttribute('class', 'clickclass'); } } document.getElementById('C').addEventListener("click", hoverMe); function hoverMe() { alert('I am clickable too !') }

 div { background-color: green; margin: 2px } .clickclass:hover { background-color: red; color: blue; }

 <div id="A" onclick='alert("A")'>Click me ! A</div> <div id="B" onclick='alert("B")'>Click me ! B</div> <div id="notAclickableElement">Don't click me :( Z</div> <div id="C">Click me ! C</div> <div id="D" onclick='alert("D")'>Click me ! D</div>