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.
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";
});
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments