Css on clickable element (*[onclick]:hover)

Question

I want to use to style my clickable element (javascript function onclick), when they hovered. So far I have this :

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

It works fine for most of my elements as you can see :

 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>

But it only work for element where the onclick function is written in the Html page, and not added via Javascript. Is there a way to properly select all clickable elements ?

Answer 1

The browser know a handful of elements that can be clicked by default, like the <a> and <button> elements. It is usually a good practice to use these elements if you want the user the click them, as they require little work to modify.

Other than that you could just add a class to the elements which to target them with as there is not a selector for an element that can be clicked.

However, it is a good practice to add a tabindex attribute to the elements that can be clicked as it makes them focusable. Users without a mouse (they exist) can use the Tab key to cycle through the clickable elements and click them with Enter or Spacebar . The elements mentioned in the first paragraph already incorporate this natively. With <div> elements you'll have to add this behavior manually.

The example below targets all clickable elements with a class and adds the :focus selector for the focussed styles.

 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

Sure. Just remove the [onclick] in the CSS.

 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>

However, that also changed the background too, so we can designate a specific class to the divs like so:

 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>

Designating the hover to a single class is much more efficient, because you can define different hover effects for different things. All you have to do is add class="hoverme"

Answer 3

You can use .class in CSS.

 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

I hope I have been helpful

 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>