鼠标悬停时将圆形居中于复选框内的实现求助

问题描述 #

尝试在鼠标悬停复选框时，将半透明橙色圆形（原代码中为#f3920048）居中显示在方形复选框内，但未能成功实现。

问题原因 #

1. 悬停伪元素(::after)以.container-checkbox为定位参考，而该容器的尺寸包含了复选框方形框的margin值，导致圆形居中在容器而非目标方形框内
2. label未设置明确尺寸，hover触发范围和定位基准不准确

解决方案 #

修改CSS代码，调整定位参考和元素尺寸，确保圆形精准居中在方形复选框内：

.container-checkbox { 
  position: relative;
  display: inline-block;
  line-height: 0;
}

.container-checkbox input {
    display: none;
}

.container-checkbox input + label {
    /* 给label设置定位参考和匹配的尺寸 */
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 7px;
    cursor: pointer;
}

.container-checkbox input + label::before {
    content: '';
    height: 100%;
    width: 100%;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0);
    border: 2px solid #999a99;
    display: inline-block;
    vertical-align: middle;
}

.container-checkbox input:checked + label::before {
    background-color: #f39200;
    border: 2px solid #f39200;
    border-radius: 4px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0,0,256,256' width='14px' height='14px' fill-rule='nonzero'%3E%3Cg fill-opacity='0' fill='%23dddddd' fill-rule='nonzero' stroke='none' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='none' font-weight='none' font-size='none' text-anchor='none' style='mix-blend-mode: normal'%3E%3Cpath d='M0,256v-256h256v256z' id='bgRectangle'%3E%3C/path%3E%3C/g%3E%3Cg fill='%23ffffff' fill-rule='nonzero' stroke='none' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='none' font-weight='none' font-size='none' text-anchor='none' style='mix-blend-mode: normal'%3E%3Cg transform='scale(16,16)'%3E%3Cpath d='M5.857,14.844l-5.685,-5.812l2.859,-2.797l2.857,2.921l7.096,-7.095l2.828,2.828z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.container-checkbox input + label:hover::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 根据需求调整圆形大小，这里设置为和方形框等大，如需更大可修改宽高 */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #f3920048;
    /* 若需要圆形覆盖在方形框下方，可添加z-index: -1 */
    /* z-index: -1; */
}

<table>
  <thead>
    <tr>
      <th>
        <div class="container-checkbox">
          <input id="checkbox-all" type="checkbox" />
          <label for="checkbox-all"></label>
        </div>
      </th>
    </tr>
  </thead>
</table>

关键修改点 #

• 给label添加position: relative，让悬停伪元素以label为定位基准
• 让label的宽高、margin与::before保持一致，确保定位中心与方形框重合
• 调整hover圆形的尺寸（可按需修改），使其精准覆盖或居中在方形框内

内容的提问来源于stack exchange，提问作者rafaelcb21