CODEWITHSUNDEEP
javascripthtmlcssonclick
Portevent
Portevent

Reputation: 744

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

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 ?

Upvotes: 0

Views: 1950

Answers (4)

54ka
54ka

Reputation: 3589

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>

Upvotes: 0

Emiel Zuurbier
Emiel Zuurbier

Reputation: 20924

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>

Upvotes: 1

VivaLaCode
VivaLaCode

Reputation: 16

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>

Upvotes: 0

Spectric
Spectric

Reputation: 31987

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"

Upvotes: 0

Related Questions