边框悬停

Question

我一直在尝试修复我的 HTML 代码，但遇到了一个问题。 我的目标是按钮将覆盖整个元素，我找到了解决方案，但我的解决方案是让边框悬停，不知道如何修复。

.butn {
  text-align: center;
  border: none;
  padding: 12px;
  background-color: #ffeaa7;
  width: 100%;
  display: block;
  Font-size: 20px;
}

.butn:hover {
  background-color: #7bed9f;
  color: white;
}

<ul class="listdrop">
  <li class="card-head">Intermidate</li>

  <li>Get Big</li>
  <li>Get Strong</li>
  <li>Feel good</li>
  <li class="pay">300$</li>
  <li class="butn">
    <button type="button" class="butn">Buy</button>
  </li>
</ul>

我也会发布我的代码笔代码：https://codepen.io/picklemyrickle/pen/XWjzyvb 所以我的目标是确保按钮覆盖整个块，就像在“休闲”+“初学者”按钮中（那里的 HTML 是错误的），我在“中级”上所做的解决方案有效，但如果你把鼠标在该按钮的边框上，它悬停在边缘，不知道如何修复它。

Answer 1

所以从 codepen 来看，这三个人的行为似乎都是一样的。根据我收集的信息，您希望使整个元素可点击。现在您可以将其他所有内容封装在一个按钮中，但这可能会变得混乱。

或者，您也可以在列表上使用点击事件，然后在 CSS 中添加：

cursor: pointer;

通过检查，它看起来就像是一个按钮，但在语义上会有所不同。