CSS旋轉的箭頭有幻影高度

Question

我已經旋轉了一個箭頭，但它具有幻影高度。

當我將鼠標懸停在幻影高度上時，它也會導致懸停效果啓動。

形象展示在這裏：

CSS：

.navbar { 
    background: #FFFFFF; 
    box-shadow: 0 2px 3px #000000; 
    position: fixed; 
    width: 100%; 
    top: 0; 
    z-index: 10; 
} 
.dropdown { 
    width: 100%; 
    background-color: #E6E6E6; 
    text-align: center; 
    cursor: pointer; 
    transition: all 0.5s; 
    -o-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 
.dropdown:hover { 
    background-color: #00B3FF; 
} 
.dropdown-arrow { 
    cursor: default; 
    display: block; 
    -ms-transform: rotate(90deg); 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    transform: rotate(90deg); 
} 

有什麼辦法解決這一問題？

Answer 1

您已將display設置爲block，因此該元素將佔用100％的寬度。旋轉時，寬度變爲高度，因此您會看到很大的高度。

以下代碼段具有可視演示在默認狀態下，元件的寬度如何成爲其高度在變換狀態（就在元件上hover）。

.dropdown-arrow { 
 
    cursor: default; 
 
    display: block; 
 
    background: red; 
 
    transition: all 1s; /* just for demo */ 
 
    transform-origin: left bottom; /* just for demo */ 
 
} 
 
.dropdown-arrow:hover { 
 
    transform: rotate(90deg); 
 
}

<div class='dropdown-arrow'>></div>

---

相反設置display爲inline-block。將顯示設置爲內嵌塊意味着元素不會佔用100％寬度，因此將避免使用模型高度。

.dropdown-arrow { 
 
    cursor: default; 
 
    display: inline-block; 
 
    transform: rotate(90deg); 
 
    transform-origin: left bottom; 
 
    background: red; 
 
    padding: 4px; 
 
}

<div class='dropdown-arrow'>></div>

注：在這兩個片段，我只用，是有關這個問題的代碼。您的.dropdown-arrow元素的內容可能與我所用的內容不一樣，但行爲將會相同。