Search code examples
htmlcsssharepointweb-parts

A hover on top of a hover

I already have a css hover where when hovering over someones name, a card to the side appears with more information about that user.

Is it possible to have another hover on top of the first hover? So another card appears with even more information.

Name (hover on name) > d.o.b, address , etc (hover on their d.o.b for example) > second card appears with further info.

Thanks,

Jack

At the moment I just have the initial as a radio button which brings up the first info card, then I have a hover based off of that to show the second info card.

Solution

  • Here's an simple example I made:

    #a {
  width: 100px;
  background: blue;
  height: 100px;
}

#a:hover {
  background: yellow;
}

#b {
  width: 50px;
  background: black;
  height: 50px;
}

#b:hover {
  background: red;
}
    <div id="a"> 
  <div id="b">
  </div>
</div>