User:Saag/common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
/* Container for the hover element */ | |||
.hover-to-show { | |||
position: relative; /* Ensure that the hover-to-show element is the reference point for the absolutely positioned element */ | |||
} | |||
.hide { | .hide { | ||
display: none; | display: none; | ||
opacity: 0; | opacity: 0; | ||
transition: opacity 0.5s ease; | transition: opacity 0.5s ease; | ||
position: absolute; /* Change to absolute to make positioning relative to .hover-to-show */ | |||
top: 100%; /* Adjust to position the element below the hover-to-show element */ | |||
left: 0; /* Align horizontally, modify if you need to offset horizontally */ | |||
z-index: 2; | |||
cursor: pointer; | |||
} | } | ||
.hover-to-show:hover + .hide { | .hover-to-show:hover + .hide { | ||
display: block; | |||
opacity: 1; | |||
} | } |
Revision as of 18:33, 6 September 2024
/* Container for the hover element */
.hover-to-show {
position: relative; /* Ensure that the hover-to-show element is the reference point for the absolutely positioned element */
}
.hide {
display: none;
opacity: 0;
transition: opacity 0.5s ease;
position: absolute; /* Change to absolute to make positioning relative to .hover-to-show */
top: 100%; /* Adjust to position the element below the hover-to-show element */
left: 0; /* Align horizontally, modify if you need to offset horizontally */
z-index: 2;
cursor: pointer;
}
.hover-to-show:hover + .hide {
display: block;
opacity: 1;
}