Issue
When I hover the the parent I want the opacity of the child element to be at 0.3 (initial 0). Then when hover the child I want the opacity of the child to be 1.
But what I've tried the hover on the parent seems to overwrite the hover-effect of the child.
This is what I've tried. HTML:
<div class="forwardArrowContainer">
<h2>JavaScript</h2>
<a href="/learnJS.html"><i class="fa-regular fa-circle-right fa-2x forwardArrow"></i></a>
</div>
CSS:
.forwardArrowContainer {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.forwardArrow {
opacity: 0;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.forwardArrowContainer:hover .forwardArrow{
opacity: 0.2;
}
.forwardArrow:hover {
opacity: 1;
color: rgba(209, 130, 34, 1);
transition-duration: 1s;
}
Solution
I think this might work for you, I have override the opacity property of the child using !important as the parent styles were applying to it.
.parent {
position: relative;
display: inline-block;
}
.child {
position: absolute;
top: 0;
left: 100%;
opacity: 0;
transition: opacity 0.3s ease; /* Add a smooth transition effect */
}
.parent:hover .child {
opacity: 0.3;
}
.child:hover {
opacity: 1 !important;
}
<div class="parent">
Parent
<div class="child">Child</div>
</div>
Answered By - Nishant Fulara
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.