CODEWITHSUNDEEP
htmlcsssharepointweb-parts
JackFV
JackFV

Reputation: 13

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.

Upvotes: 1

Views: 118

Answers (2)

Lundstromski
Lundstromski

Reputation: 1247

.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 class="parent">
  <div class="child">
    <div class="sub-child"></div>
  </div>
</div>

Upvotes: 0

Raphael Ben Hamo
Raphael Ben Hamo

Reputation: 166

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>

Upvotes: 0

Related Questions