html - :hover not working on div, 正在处理页面的其他部分

Question

我的悬停类在我的按钮 div 上不起作用，但它在我网页的其他部分上起作用，包括使用绝对位置的部分。

.desbutton {
  margin-left: 25px;
  margin-bottom: 25px;
  height: 36px;
  width: 113px;
  background-color: #4A6D81;
  border-radius: 2px;
  position: absolute;
  bottom: 0;
}
.desbutton:hover {
  background-color: #80999E;
}

<div class="desbutton">
  <p class="butText">READ MORE</p>
</div>

Jsfiddle with full src

Answer 1

请检查:为什么您的.designCard attr z-index: -1。这会导致您的 body 元素 higher 然后您的卡片，因此您的悬停永远不会被“调用”