vue 悬停显示另一个div_当有人将鼠标悬停在div上时显示另一个div

I have 2 separate div tags. I want div2 to appear when someone hovers over div1.

This is what I am trying to achieve..

HTML

HOVER TO ADD DETAILS

CSS

.div1{ background-color:#bcbcbc; width: 400px; height:45px;}

.div2{ display:none; position:relative; width: 50px; margin:0 auto;}

.div1 > .div2 {display:block; }

This is what I am trying.. It is not working. I am not able to show div2 when I hover div1. I've searched over the net but not able to find what I want. any idea how to do this. I would appreciate a css way of doing it. Thanks in advance..

解决方案

Make .div1 the child of .div2 like:

...

And then the CSS:

.div2 {

display: none;

}

.div1:hover > .div2 {

display: block;

}

.div2:hover {

display: block;

}

And also add your CSS.