In the process of creating a dropdown menu that transitions with a fade in and fade out effect upon hover, I noticed an interesting anomaly. While all elements share the same transition behavior, there is a noticeable difference in appearance when hovering over the first tab which remains visible. This slight variation between the two elements becomes apparent upon close inspection.
Check out the JSFiddle demo for reference: https://jsfiddle.net/a9b83786/
Snippet of HTML code:
<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 styling:
: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);
}
(For any recent changes, please refer to the JSFiddle link provided)