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