我正在制作一个下拉菜单，当你将鼠标悬停在它上面时，该菜单应该淡入并淡出 . 所有元素都具有相同的过渡，但是当悬停在其上时，始终可见的第一个选项卡看起来不同 . 如果在将鼠标悬停在下拉列表上时仔细观察，则可以看到两个元素之间的差异 .
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是否有更新）
1 回答
在某些浏览器（i.a.Firefox）中看起来不错 . 根据this，在您的情况下，背景颜色和透明度过渡都应计算为相同的插值 . 所以我认为这是一个错误 . 您可以通过更改背景颜色和文本颜色来更改不透明度更改，从而轻松解决此问题：https://jsfiddle.net/hcphs3ey/ .