hover effect on two rows in one paragraph not working

Question

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?

Thank you

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. Although you have provided a [**link to an example or site**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it), if the link were to become invalid, your question would be of no value to other future SO users with the same problem. — Paulie_D, Jun 22 '16 at 09:56

score 3 · Accepted Answer · answered Jun 22 '16 at 09:29

3

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>

answered Jun 22 '16 at 09:29

Mohammad Usman

it works, thanks :) can you explain why? what exactly does overflow have to do with this? – devman Jun 22 '16 at 09:31
@devman Always remember to set layout of parent elements whenever you use float on children. `overflow: hidden` sets layout of parent. There are many other ways to set layout as well. You can read about other ways to set layout here.. http://www.satzansatz.de/cssd/onhavinglayout.html – Mohammad Usman Jun 22 '16 at 09:34

1 Answers1