CODEWITHSUNDEEP
javascriptcss
JoshuaLC
JoshuaLC

Reputation: 69

How to apply style to multiple classes on hover of an element?

Whenever I hover over #Rock div I want it to apply a style to both .RockToScissors & .RockToLizard at the same. A the moment I have: 

<div onmouseover="overRock()" onmouseout="outRock()">
    <svg>
        <path stroke="#000" fill="#000"/>
    </svg>
</div>

Then in Javascript I have:

function overRock() {
    var myPara = document.querySelector(".RockToScissors");
    myPara.style.stroke = "#008000";
    myPara.style.fill = "#008000";
}

function outRock() {
    var myPara = document.querySelector(".RockToScissors");
    myPara.style.stroke = "#000";
    myPara.style.fill = "#000";
}

But this only allows me to apply the styling to one class. How can I make it apply to both .RockToScissors & .RockToLizard at the same time when hovering #Rock div?

I've tried var myPara = document.querySelectorAll(".RockToScissors, .RockToLizard"); but then the style doesn't apply to either.

Upvotes: 2

Views: 1033

Answers (3)

Monika Mangal
Monika Mangal

Reputation: 1760

You can also do it using css -

If the .RockToScissors and .RockToLizard is directly inside the container:

#Rock div:hover > .RockToScissors, #Rock div:hover > .RockToLizard { //css to modify }

If .RockToScissors and .RockToLizard is next to (after containers closing tag) the container:

#Rock div:hover + .RockToScissors, #Rock div:hover + .RockToLizard { //css to modify }

If the .RockToScissors and .RockToLizard is somewhere inside the container:

#Rock div:hover .RockToScissors, #Rock div:hover .RockToLizard { //css to modify }

If the .RockToScissors and .RockToLizard is a sibling of the container:

#Rock div:hover ~ .RockToScissors, #Rock div:hover ~ .RockToLizard { //css to modify }

Upvotes: 1

Mamun
Mamun

Reputation: 68933

Include both the class as part of the selector in querySelectorAll(). Then loop through them to set the style individually:

Try the following way:

function overRock() {
  var myPara = document.querySelectorAll(".RockToScissors, .RockToLizard");
  myPara.forEach(function(el){
    el.style.stroke = "#008000";
    el.style.fill = "#008000";
  });
}

function outRock() {
  var myPara = .querySelectorAll(".RockToScissors, .RockToLizard");
  myPara.forEach(function(el){
    el.style.stroke = "#000";
    el.style.fill = "#000";
  });

}

Upvotes: 3

HeySora
HeySora

Reputation: 916

You can just do document.querySelectorAll(".RockToScissors, .RockToLizard"); to target both elements.

document.querySelectorAll() supports all CSS selectors, and , is also valid.

Upvotes: 2

Related Questions