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。将显示设置为 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>

Note: In both snippets, I have used only the code that is relevant to the question. The content of your .dropdown-arrow element might not be the same as what I've used but the behavior will be the same.

CSS 旋转的箭头具有幻像高度

CSS rotated arrow has phantom-height

html

css

height

css-transforms