如何創建一個圓形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>