如何创建一个圆形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%。

为了实现之前伪元素的正确定位和大小，您需要将实际元素设置为具有位置，在这种情况下，代码段将其设置为相对，伪元素定位为绝对，在实际元素后面：

 .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>