CODEWITHSUNDEEP
htmlcss
Julius M Sapija
Julius M Sapija

Reputation: 11

how to activate 3 different hover on each element simultaneously?

I have a structure like this :

HTML

.ba, .ca {
  color:black;
  size:2rem;
}

.ba:hover {
  color:red;
  size:2.5rem;
}

.ca:hover {
  color:blue;
}
<section class="a">
  <div class="b">
    <h1 class="ba">Hallo</h1>
  </div>
  <div class="c">
    <p class="ca">Help</p>
  </div>
</section>

how do I activate the hover of each element simultaneously when the cursor touches any part of the section?

Upvotes: 0

Views: 71

Answers (2)

Leon William
Leon William

Reputation: 1

<style>

.ba, .ca {
color:black;
size:2rem;
}

.ba:hover {
color:red;
size:2.5rem;
}

.ca:hover {
color:blue;
}
section:hover .ba{
color:red;
size:2.5rem;
}
section:hover .ca{
color:blue;
}
</style>

<section class="a">
<div class="b">
<h1 class="ba">Hallo</h1>
</div>
<div class="c">
<p class="ca">Help</p>
</div>
</section>

Upvotes: 0

Debsmita Paul
Debsmita Paul

Reputation: 1460

You should add hover to parent that will affect the children.

Like so -

.ba,
.ca {
  color: black;
  size: 2rem;
}

.a:hover .ba {
  color: red;
  size: 2.5rem;
}

.a:hover .ca {
  background-color: lightblue;
  color: #fff;
}
<section class="a">
  <div class="b">
    <h1 class="ba">Hallo</h1>
  </div>
  <div class="c">
    <p class="ca">Help</p>
  </div>
</section>

Upvotes: 1

Related Questions