代码之家 › 专栏 › 技术社区 › Oliver Engbjerg Christensen

CSS:不同的元素具有相同的过渡,但不会以相同的方式淡入或淡出

fade transition drop-down-menu css html

Oliver Engbjerg Christensen · 技术社区 · 7 年前

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

JSFIDLE(JSIDLE): 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);
}

(检查JSFIDLE以获取更新)

1 回复 | 直到 7 年前

Marek Lipka 7 年前

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

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