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元素的内容可能与我所用的内容不一样，但行为将会相同。