CODEWITHSUNDEEP
css
devman
devman

Reputation: 701

hover effect on two rows in one paragraph not working

I have a <p> containing two <span>s, and I want one of them to float right, and each to be on an individual line (achieved by display:block).

on hover, they both should be highlighted, so I have put a :hover on the surrounding <p>.

Still, only one span gets highlighted.

Why? And how can I change it?

https://jsfiddle.net/o8wk7n8t/

Thank you

Upvotes: 0

Views: 44

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39392

Set layout of .parent with overflow: hidden as you are using float.

.parent {
  overflow: hidden;
}


.parent {
  overflow: hidden;
}
.parent:hover {
  background-color: red;
}

.right {
  float:right;
}

.left,
.right {
  display: block;
}
<p class="parent">
 <span class="left">Hi</span>
 <span class="right">Ho</span>
</p>

Upvotes: 3

Related Questions