View Full Version : Can a single a:hover effect multiple anchors?

Nov 25th, 2008, 06:35 PM
Does anyone have a CSS solution for this. I'm sure this would be very do-able with JS, but I'd much rather do it in CSS if it's possible.
Here's my starting point:

li.a1 a:hover{font-weight:bold}
li.z9 a:hover{font-weight:bold}
<li class="a1"><a href=#>ABC123</a></li>
<li class="z9"><a href=#>XYZ789</a></li>
<p>jhkjudsis duisdh udishuisdh agqia du ahauli.</p>
<li class="a1"><a href=#>abc123</a></li>
<li class="z9"><a href=#>xyz789</a></li>

I'm hoping that both links of the same class can get effected by hovering over either one.

~ Mo

NOTE: I know bold on hover is not advised for space/shifting reasons, but that's really the issue here.

Nov 25th, 2008, 06:49 PM
Nope, not possible with CSS. CSS is the abbreviation for cascading stylesheet with the emphasis on “cascading” which means that CSS can style elements that are related to each other in a descending fashion (or on the same level). And by related to each other I mean parent>child or sibling relationships. So, in a nutshell: You can style child or sibling elements differently by hovering over a parent or sibling, respectively, but you can’t style a parent element by hovering over the child, or a sibling of a parent by hovering over a child. In other words: A cascade can only go down (or sidewards), not upwards.

However, with a simple JavaScript all your dreams could become reality. You’d just need getElementsByClass (dustindiaz.com/getelementsbyclass/) and apply a style to all returned elements on mouseover of any one of the returned elements.

Nov 25th, 2008, 06:58 PM
I was afraid of that :).


~ Mo