CODEWITHSUNDEEP
csscss-transitionstransition
forloop
forloop

Reputation: 147

How can I start a transition for element b when element a is hovered?

I have two elements. When I hover over one of them (an img), I want it to start a transition on a different element on the page. I am 99.999% sure I have done this before, but I can't remember how, and no amount of searching has given me any hints.

How can I start a transition for element b when element a is hovered?

Upvotes: 2

Views: 61

Answers (2)

m4n0
m4n0

Reputation: 32275

You can use the + sibling selector.

Target element a for the :hover pseudo-class and select the sibling element b. Use the transition property on the element b being targeted.

.a:hover + .b {
  background: #8AACFF;
}
.b {
  background: lightblue;
  transition: all ease 1s;
}
<div class="a">Hover over me</div>
<div class="b">My background will change</div>

Upvotes: 1

feeela
feeela

Reputation: 29922

You can do so in CSS, if the second element is a sibling of the first.

Take for example the following markup:

<img src="…" class="hover-trigger">
<section class="hover-target">

and this CSS:

.hover-target {
    opacity: 0;
    transition: opacity 200ms linear;
}

.hover-trigger:hover + .hover-target {
    opacity: 1;
}

When you hover over the img.hover-trigger the transition on the .hover-target will get triggered.

Upvotes: 1

Related Questions