如何创建一个圆形div，其中可点击区域仍然是正方形，悬停效果减少了它的半径

Question

所以我做的是我附加的片段，但问题是，当悬停在方形区域，而不是在圆形区域或角落，它的抖动。我需要让方形区域保持可点击状态。我想知道如何正确地处理这个问题。

.container {
background-color: orange;
width: 150px;
height: 150px;
}
.container:hover {
border-radius: 50%;
background-color: red;
}

<div class="container"> </div>

输入图片描述

Answer 1

您可以使用伪元素，如::after或::before。

虽然在所选元素插入内容，但::after在之后插入内容所选元素和::before在之前插入内容选择的元素。

content属性生成伪元素。如果您不设置该属性，它将默认为content: none;，并且不会生成您的伪元素。

.container {
background-color: orange;
width: 150px;
height: 150px;
}
.container::after {
content: "";
position: absolute;
height: inherit;
width: inherit;
background-color: red;
opacity: 0;
transition: all .15s linear;
}
.container:hover::after {
opacity: 1;
border-radius: 50%;
}

<div class="container"> </div>

Answer 2

您可以使用before伪元素作为背景，因此在悬停时保持实际元素不变。

before伪元素被赋予与元素相同的尺寸，但在悬停时将其背景从橙色更改为红色，其半径更改为50%。

要实现before伪元素的正确定位和大小，您需要设置实际元素的位置，在本例中代码段将其设置为相对位置，而pseudo元素的位置为绝对位置，位于实际元素的后面:

.container {
width: 150px;
height: 150px;
position: relative;
}
.container::before {
content: '';
background-color: orange;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.container:hover::before {
border-radius: 50%;
background-color: red;
}

<div class="container"> </div>