时间戳

首页 > 解决方案 > 边框悬停

html - 边框悬停

问题描述

我一直在尝试修复我的 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 是错误的），我在“Intermidate”上完成的解决方案有效，但如果你将鼠标放在该按钮的边框上，它会悬停在边缘，不知道如何修复它。

标签： htmlcssbuttonhover

解决方案

从 中删除 class="butn" <li>，然后边框将消失（仅保留在按钮内）：

<li><button type="button" class="butn">Buy</button></li>

推荐阅读