A hover on top of a hover-CodePudding

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.

CodePudding user response：

.parent {
  width: 100px;
  height: 100px;
  background-color: lightpink;
}

.child,
.sub-child {
  display: none;
  width: 100px;
  height: 100px;
  position: relative;
  right: -100px;
}

.child {
  background-color: lightgreen;
}

.sub-child {
  background-color: lightblue;
}

/* Show the child when hovering on the parent */
.parent:hover .child {
  display: block;
}

/* Show the sub-child when hovering on the child */
.child:hover .sub-child {
  display: block;
}

/* Not needed, just styling */ 
div:hover {
  outline: 2px solid red;
}

<div >
  <div >
    <div ></div>
  </div>
</div>

CodePudding user response：

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>