CODEWITHSUNDEEP
htmlcsshover
Bruno Gibellino
Bruno Gibellino

Reputation: 135

How to on hover of element style itself and another element

So I have a div with a paragraph and bold inside, like:

.tt {
  border: 2px solid;
  text-align: center;
  padding:  0 0 3% 0;
}
<div class="tt">
  <p>This text stays quiet</p>
  <b>But this underlines</b>
 </div>

So what I wanted was to on hover of that div style it, let's say cursor: pointer and the bold text underlined. Is there any way of making the same code for both, like in the same div:hover style both elements?

-- EDIT --

#tt {
  text-align: center;
  border: 2px solid; 
  padding: 3% 0 3% 0;
}
<div id="tt">
  Now this underlines<br>
  <b>but this stays quiet</b>
</div>

Upvotes: 0

Views: 344

Answers (2)

Savado
Savado

Reputation: 585

You can add styling to all children of the hovered element. Like this:

.tt {
  border: 2px solid;
  text-align: center;
  padding:  0 0 3% 0;
  cursor: pointer;
}

.tt:hover b {
  text-decoration: underline;
}
<div class="tt">
  <p>This text stays quiet</p>
  <b>But this underlines</b>
 </div>

Upvotes: 2

Jon Uleis
Jon Uleis

Reputation: 18659

Yes, you can easily achieve that like this. Live demo below.

Just keep in mind that changing the cursor on :hover doesn't really serve a purpose, since you could just set the cursor: pointer to always be on that element and you'd have the same effect.

.tt {
  border: 2px solid;
  text-align: center;
  padding:  0 0 3% 0;
}

.tt:hover {
  cursor: pointer;
}

.tt:hover b {
  text-decoration: underline;
}
<div class="tt">
  <p>This text stays quiet</p>
  <b>But this underlines</b>
 </div>

Upvotes: 2

Related Questions