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）中看起来不错。根据{{3}}，在您的情况下，背景颜色和透明度过渡都应计算为相同的插值。所以我认为这是一个错误。您可以通过更改背景颜色和文字颜色的不透明度更改轻松解决此问题：this。

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

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

1 个答案: