display an element when hovering on another element

Question

I want when hovering on yellow box which has the class named card the element which is a blue box that has a class named box to appear. I have done that in css like this

.box {
  display: none;
}

.card:hover + .box {
  display: inline-block;
  position: absolute;
  height: 30px;
  width: 40px;
  background-color: blue;
  top: 114px;
  right: 94px;
  border-radius: 0px 0px 99px 99px;
}

but it didn't work with me what is the problem ? this is the sandbox link https://codesandbox.io/s/quiet-water-yx1l3g?file=/src/styles.css:336-358[![enter image description here]1]1

score 1 · Accepted Answer · answered Dec 19 '22 at 06:35

1

.box {
  display: none;
 
}

.card:hover .box {
  display: inline-block;
  position: absolute;
  height: 30px;
  width: 40px;
  background-color: blue;
  top: 114px;
  right: 94px;
  border-radius: 0px 0px 99px 99px;
}

answered Dec 19 '22 at 06:35

Mohammed Shahed

840
2
15

score 0 · Answer 2 · answered Dec 19 '22 at 06:34

In your html .box is inside .card element. You're using adjacent sibling selector (+). just use descendant selector. .card:hover .box

.card:hover .box {
  display: inline-block;
  position: absolute;
  height: 30px;
  width: 40px;
  background-color: blue;
  top: 114px;
  right: 94px;
  border-radius: 0px 0px 99px 99px;
}

score 0 · Answer 3 · answered Dec 19 '22 at 06:38

Just remove the plus. Plus target its same sibling element. The box element is the child of the card. So it would be best if you targeted like this.

 .card:hover .box {
     display: inline-block;
     position: absolute;
     height: 30px;
     width: 40px;
     background-color: blue;
     top: 114px;
     right: 94px;
     border-radius: 0px 0px 99px 99px;
    }

display an element when hovering on another element

3 Answers3