Question

我有这个CSS＆amp; 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

内联样式会覆盖样式表。

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

＆＃13;

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

＆＃13;

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

＆＃13;

使p出现在div悬停上

2 个答案: