Triggering Multiple CSS Events

Question

I have a List Item that on hover, changes its BG color and also makes the border right grow out from 0-7px. Within the list item there is a label for a radio input that is toggling content off and on when clicked. When the border grows, the label gets pushed over.

Is it possible to specify that on hover attributes X and Y happen to the list item, while triggering another css event to change the z-index of the label?

Please provide a minimal reproducible example of your code.

Shaggy
– Shaggy

2016-09-13 20:27:19 +00:00
Commented Sep 13, 2016 at 20:27 — Shaggy
– Shaggy, Commented Sep 13, 2016 at 20:27

theJoi · Accepted Answer · 2016-09-13 22:29:20Z

2

In general, if you want to hover over one element and this trigger an action on an adjacent element, just use plus sign. For example,

.hoverable:hover + .actionable {

Check out this codepen for a simple working example: http://codepen.io/Joi/pen/VKZqAX

answered Sep 13, 2016 at 22:29

theJoi

4035 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Theodore Steiner Over a year ago

But is it possible to have two different effects to those individual pieces?

theJoi Over a year ago

Yes, you just have to have two separate rules (basically a rule each element type). I modified the codepen alittle bit so you can see how I can change both the div I'm hovering over and another one.

Collectives™ on Stack Overflow

Triggering Multiple CSS Events

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related