使 p 出现在 div 悬停时

Question

到目前为止，我有这个 CSS & HTML：

.divi:hover {
  background: #01ba7c;
}
.divi:hover > p {
  visibility: visible;
}

<div style="height: 100px; width: 100px; position: relative; left: 300px;       top: 100px; border: 2px solid black;" class="divi">
  <p style="visibility:    hidden;">This is a test and better work!</p>
</div>

我想要的是仅当有人悬停包含 p 的 div 时才显示文本。为什么这不起作用？所发生的只是我的 div 的背景更改为我指定的颜色。谢谢！

Answer 1

这是一个选择器特异性问题，您的内联样式比您的任何样式表规则都强。

https://www.w3.org/TR/css3-selectors/#specificity

https://www.w3.org/TR/html401/present/styles.html#h-14.2.2

.divi {
  height: 100px;
  width: 100px;
  position: relative;
  left: 300px;
  top: 100px;
  border: 2px solid black;
}
.divi:hover {
  background: #01ba7c;
}
.divi p {
  visibility: hidden;
}
.divi:hover > p {
  visibility: visible;
}

<div class="divi">
  <p>This is a test and better work!</p>
</div>

Answer 2

内联样式覆盖样式sheet。

将 <p style="visibility: hidden;"> 更改为 <p>

.divi:hover {
background: #01ba7c;
  
}
.divi > p{
  visibility:    hidden;
}
.divi:hover > p {
visibility: visible;
}

<div style="height: 100px; width: 100px; position: relative; left: 300px;       top: 100px; border: 2px solid black;" class="divi">
  <p>This is a test and better work!</p>
</div>

使 p 出现在 div 悬停时

Make p appear on div hover

html

css

hover