CSS: 不同的元素有相同的过渡，但不是以相同的方式淡入或淡出

Question

我正在制作一个下拉菜单，当您将鼠标悬停在它上面时，它应该会淡入淡出。所有元素都有相同的过渡，但始终可见的第一个选项卡在悬停在其上时看起来有所不同。如果将鼠标悬停在下拉菜单上时仔细观察，您会发现这两个元素之间存在细微差别。

JSFiddle： https://jsfiddle.net/a9b83786/

HTML:

    <div class="nav">
    <!--.xX~Dropdown~Xx.-->
    <div class="navChild navDropdown">
        <!--Dropdown parent-->
        <div class="navTab navTabDropdownParent">
            Units
        </div>
        <!--Dropdown item-->
        <a href="#" class="navTab navTabDropdownItem">
            Length [M]
        </a>
    </div>

CSS:

  :root{
  /*Colors*/
  --Normal-Color: #24AAB8;
  --Hover-Color: #26C2A5;
  --Active-Color: #26C24D;

  /*Lengths*/
  --Nav-Height: 60px;

  /*Multiplier*/
  --NavTab-Width-Multiplier: 2;
}
/*Navigation Tabs*/
/*Nav tabs in general*/
.navChild {
  display: inline-block;
  float: left;
  position: relative;
  z-index: 1;
}
.navDropdown:hover .navTabDropdownParent {
  background-color: var(--Normal-Color)
}
.navDropdown:hover .navTabDropdownItem {
  opacity: 1;
}
.navDropdown {
  height: var(--Nav-Height);
}
.navDropdown:hover {
  height: auto;
}



/* MAIN TRANSITION CODE */
.navTab {
  height: var(--Nav-Height);
  width: calc(var(--NavTab-Width-Multiplier) * var(--Nav-Height));
  display: block;
  text-align: center;
  line-height: var(--Nav-Height);
  text-decoration: none;
  color: black;
  transition: all 0.2s linear; /* First transition */
}
.navChild:hover .navTab {
  visibility: visible;
  transition: all 0.2s linear; /* Second transition */
}





/*Buttons*/
.navTabButton:hover {
  background-color: var(--Hover-Color);
}
.navTabButton:active {
  background-color: var(--Active-Color);
}
/*Dropdown*/
.navTabDropdownItem:hover {
  background-color: var(--Hover-Color);
}
.navTabDropdownItem:active {
  background-color: var(--Active-Color);
}
.navTabDropdownItem{
  visibility: hidden;
  opacity: 0;
  background-color: var(--Normal-Color);
}

（检查 JSFiddle 更新）

Answer 1

它在某些浏览器中看起来不错（i.a。Firefox）。根据 this，在您的情况下，背景颜色和透明度过渡都应计算为相同的插值。所以我认为这是一个错误。您可以通过将不透明度更改替换为背景颜色和文本颜色的更改来轻松解决此问题：https://jsfiddle.net/hcphs3ey/.

.navTabDropdownItem{
   visibility: hidden;
   color:transparent;
   background-color: white;
}
.navDropdown:hover .navTabDropdownItem {
   visibility: visible;
   background-color: var(--Normal-Color);
   color:black;
}

CSS: 不同的元素有相同的过渡，但不是以相同的方式淡入或淡出

CSS: Different Elements Have The Same Transition, But Does Not Fade-in Or Fade-out The Same Way

html

css

transition

fade

drop-down-menu