How do you grab/affect a specific sibling in CSS or JS

Question

I'm totally new to coding, i'm trying to make a website where when you hover the mouse over a link the the link (a) becomes bigger, but the tricky thing is that i want the hover to affect the sibling right next to the active hover. Right now i'm coding in CSS but maybe i need to use JavaScript instead? Please help :)

Here is what i have written already:

<ul>
     <li><a href="">Tema 2</a></li>
     <li><a href="">Tema 3</a></li>
     <li><a href="">Tema 4</a></li>
     <li><a href="">Tema 5</a></li>
     <li><a href="">Tema 6</a></li>
    </ul>
   
    a {
    color: var(--font); 
    font-size: 100%; 
    opacity: 0.7; 
    transition: color 0.5s, font-size 0.5s, opacity 0.5s;
    }
   
    a:hover {
    color: var(--font);
    font-size: 150%;
    opacity: 1;
    }
   
    a:hover + a {
    font-size: 125%; 
    }
   
    a:not(:hover) {
    font-size: 100%; 
    }
    
    a:hover ~ a {
    font-size: 100%; 
    }

I tried the code shown above, i think that the code is not precise enough, because i'm grabbing all a's, i just seems like a lot of work to give all the a's a class and then write, when sibling no. 1 is active then sibling no. 2 is at 125% font size. And when Sibling no. 3 is active then sibling no. 2 and 4 is at 125%, but right now that is how far my knowlegde reaches...

Hope it makes sense, and sorry for errors, english is not my first language :)

For easiness to the viewer user @jules you can share you code in codepen/jsfiddle that can help to see what actully problem is. — Himesh Aadeshara, Jan 06 '23 at 11:19

score 0 · Answer 1 · answered Jan 06 '23 at 11:10

If you apply the sibling styling to the li rather than the a- then you can get the effect you are looking for. This is because the a's are only children within the li's. The li's are the siblings that need to be targetted with teh :hover psedo-styling.

a {
  color: blue; 
  display: block;
  font-size: 100%; 
  opacity: 0.7; 
  transition: color 0.25s, font-size 0.25s, opacity 0.25s;
}

li {
  list-style: none;
  padding: 2px 0 ;
}

 li:hover a {
  color: red;
  font-size: 150%;
  opacity: 1;
 }

 li:hover + li a {
  font-size: 125%; 
}

<ul>
 <li><a href="/tema-2">Tema 2</a></li>
 <li><a href="/tema-3">Tema 3</a></li>
 <li><a href="/tema-4">Tema 4</a></li>
 <li><a href="/tema-5">Tema 5</a></li>
 <li><a href="/tema-6">Tema 6</a></li>
</ul>

How do you grab/affect a specific sibling in CSS or JS

1 Answers1