Home/ Questions/Q 8976589
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T19:10:58+00:00

Any advice would be much appreciated, I’m sure this is simple for some of

  • 0

Any advice would be much appreciated, I’m sure this is simple for some of you web wizards. Thank you very much for your time.

I have some css that is working to change the revealed portion of .png when a user hovers over it:

.small_icons ul li.companyButton .circle {background-position:0 0;}
.small_icons ul li.companyButton:hover .circle {background-position:0 -56px;}

I’d like to then keep the position at 0 -56px when the user clicks on the image and switch back to 0 0 when the user clicks on a different image. This is all happening on the same page so I imagine I have to use a javascript onclick function.

I can’t seem to figure out how to access that specific css element using javascript. I’ve tried:

document.getElementByClass("circle").style.background-position:0 -56px;

but that doesn’t change anything. Is it because .circle is a child class of .companyButton which is a child class of .small_icons?

Many thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You messed with type

    document.getElementsByClass("circle") is Nodelist (object like array). so you should loop through it, or use 

     document.getElementsByClass("circle")[0].style.background-position="0 -56px";

    to loop through you need

    var circles=document.getElementsByClass("circle")
for (var index=0;index<circles.length;index++) {
  circles[index].style.background-position="0 -56px";
}

    more about dinamyc styling

    • 0