在悬停时显示，但仅在悬停的项目上显示

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;
}

看看这个fiddle

Answer 2

您的css选择不正确，请检查以下代码。此外 div 应该有其他内容或（宽度和高度）属性，否则 div 将不可见。所以在这个例子中我添加了 "less text" 来解决这个问题。

div p {
  display:none;
}

div:hover p {
   display:block;
}

<div>   less text
   <p> Lorem Ipsum</p>
</div>
<div>   less text
   <p> Lorem Ipsum</p>
</div>
<div>   less text
   <p> Lorem Ipsum</p>
</div>

Answer 3

如果您使用的较少，可以使用以下规则。

div
{
  p{
     display:none;
   }

  &:hover p
   {
      display:block;
   }
}

Display on hover, but just on hovered item