在悬停时显示,但仅在悬停项目上显示

Question

我正在尝试使这项工作:

HTML:

<div>    
   <p> Lorem Ipsum</p>
</div>
<div>
   <p> Lorem Ipsum</p>
</div>
<div>
   <p> Lorem Ipsum</p>
</div>

CSS:

div
{
  p
  {
    display:none;
  }
}

div:hover
{
   p
   {
     display:block;
    }
}

功能: 当我将鼠标悬停在div上时,我需要在其中看到一个段落.但问题是,当我悬停一个div时,文本在所有div中同时可见.有没有办法只在一个悬停的div上有可见的段落？

首选: 没有JavaScript或JQuery.只有CSS.

谢谢.

Answer 1

尝试:

div p{
  display:none;
}

div:hover p{
   display:block;
}

看看这个小提琴