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

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

3 个答案: