伪元素::before设置border-radius后hover触发范围异常求助

为伪元素::before设置了border-radius: 50%，但鼠标悬停在其圆角区域外仍会触发hover事件。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #test {
            height: 100px;
            width: 100px;
        }

        span {
            line-height: 100px;
            text-align: center;
            width: 100%;
            display: inline-block;
        }

        #test::before {
            position: absolute;
            content: "";
            background-color: red;
            width: 100px;
            height: 100px;
            display: inline-block;
            z-index: -1;
            border-radius: 50%;
        }

        #test:hover::before {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="test">
        <span>Hi</span>
    </div>
</body>
</html>

请问能否调整触发范围，使其表现与设置border-radius的普通div一致？

问题根源在于hover事件绑定在父元素#test上，而父元素是未设置圆角的方形区域，所以鼠标悬停在方形四角（伪元素圆角外区域）时，依然会触发父元素的hover。以下是几种可行的解决方式：

方案1：给父元素添加border-radius: 50% #

直接让父元素的可交互区域变为圆形，与伪元素的圆角范围对齐：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #test {
            height: 100px;
            width: 100px;
            border-radius: 50%; /* 新增：让父元素范围变为圆形 */
        }

        span {
            line-height: 100px;
            text-align: center;
            width: 100%;
            display: inline-block;
        }

        #test::before {
            position: absolute;
            content: "";
            background-color: red;
            width: 100px;
            height: 100px;
            display: inline-block;
            z-index: -1;
            border-radius: 50%;
        }

        #test:hover::before {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="test">
        <span>Hi</span>
    </div>
</body>
</html>

方案2：用clip-path裁剪父元素交互区域 #

通过clip-path: circle(50%)将父元素的鼠标交互区域裁剪为圆形，适合需要复杂裁剪形状的场景：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #test {
            height: 100px;
            width: 100px;
            clip-path: circle(50%); /* 新增：裁剪父元素交互区域为圆形 */
        }

        span {
            line-height: 100px;
            text-align: center;
            width: 100%;
            display: inline-block;
        }

        #test::before {
            position: absolute;
            content: "";
            background-color: red;
            width: 100px;
            height: 100px;
            display: inline-block;
            z-index: -1;
            border-radius: 50%;
        }

        #test:hover::before {
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="test">
        <span>Hi</span>
    </div>
</body>
</html>

方案3：将hover绑定到伪元素并调整鼠标事件穿透 #

让父元素不接收鼠标事件，转而让伪元素接收，同时保证文字区域可正常交互：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #test {
            height: 100px;
            width: 100px;
            pointer-events: none; /* 父元素不接收鼠标事件 */
        }

        span {
            line-height: 100px;
            text-align: center;
            width: 100%;
            display: inline-block;
            pointer-events: auto; /* 保证文字区域可正常交互 */
        }

        #test::before {
            position: absolute;
            content: "";
            background-color: red;
            width: 100px;
            height: 100px;
            display: inline-block;
            z-index: -1;
            border-radius: 50%;
            pointer-events: auto; /* 伪元素接收鼠标事件 */
        }

        #test::before:hover {
            background-color: blue; /* hover绑定到伪元素 */
        }
    </style>
</head>
<body>
    <div id="test">
        <span>Hi</span>
    </div>
</body>
</html>

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