1

I am coming from the .NET world and need an advice for a CSS styling:

We implemented a system which lets us design UI widgets with any SVG editor. For example a simpe play button would have a background rectangle and a triangle. In this widget all elements except the background have pointer-events="none", so that the background receives all mouse events. But on hover over the background we want to style all foreground elements as well.

Suppose there are classes .a and .b and all elements are on the same level. To modify .a on hover you write:

.a:hover { stroke: red }

To modify .b when hovered over .a you write:

.a:hover ~ .b { stroke: red }

But how can i do both at once? Of course one can write both statements, but what when there is another class .c? Would it need its own statement as well or is there something like:

//fantasy code
.a:hover ~ (.a + .b + .c) { stroke: red }
thalm
  • 2,738
  • 2
  • 35
  • 49
  • possible duplicate of [Is that possible to change multiple elements appearance on hover without Javascript, based on class name?](http://stackoverflow.com/questions/3714810/is-that-possible-to-change-multiple-elements-appearance-on-hover-without-javascr) – Zach Saucier Jul 12 '13 at 01:11
  • It's similar, but i would not call it a duplicate as all my elements are on the same level. I will add a little more context. – thalm Jul 12 '13 at 01:21
  • It's the exact same fix, it doesn't matter if they're on different levels or not – Zach Saucier Jul 12 '13 at 01:24
  • The accepted answer from the other question only works if the elements are on the same level. It does not work for the question of the OP: "I have a structure of divs inside divs, something like:". People search for the question, not the answer. – thalm Jul 12 '13 at 01:32
  • Sorry, I meant to post [this link](http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css?rq=1) instead. My bad – Zach Saucier Jul 12 '13 at 01:40

2 Answers2

3

They all need their own selectors, but you can separate them with ,:

.a:hover, .a:hover ~ .b, .a:hover ~ .c { stroke: red; }

(Note that ~ is “sibling after” and not “at the same time as”.)

If they have anything else in common (say they’re all <div>s or you can give them each another class), use that:

.a:hover, .a:hover ~ div { stroke: red; }
Ry-
  • 218,210
  • 55
  • 464
  • 476
  • Thanks for the info on ~. Is there another symbol to select all elements in the same level? not only siblings after, but also the ones before? – thalm Jul 12 '13 at 01:15
  • @thalm: No, there’s not — one of the primary complaints with CSS selectors. You’ll probably need JavaScript. (Although some context might be helpful, too.) – Ry- Jul 12 '13 at 01:16
  • @thalm: Hmm… why is the background on the same level as the rest of the elements? Shouldn’t it contain them, or at least be the first element anyways? – Ry- Jul 12 '13 at 01:32
  • In a simple SVG document its quite common to have all elements on the same level because you can only build hierarchies with elements. But its right, we just have to take care that the background is the first one, which also makes sense visually as the background should be drawn first. Thanks for the answer, it works! – thalm Jul 12 '13 at 01:35
1

You could probably accomplish this with SASS loops, but if there's only three classes I'd just go:

.a:hover, 
.a:hover ~ .b, 
.a:hover ~ .c {
    color: red;
}
powerbuoy
  • 12,460
  • 7
  • 48
  • 78