F
Farhang Amaji
Guest
I want to have accordion hover only with css, but I cant make a smooth transition
for changing display in
I have this html:
with this css
note we are changing
then I tried to
neither worked for me, so how can I make
Answer for: "smooth transition for changing display in accordion hover only with css"...
for changing display in
I have this html:
Mã:
<div class="question">
<h3>
it is a question</h3>
<div class="answer">its an answer</div>
</div>
with this css
Mã:
.chitawrapper .middle .main .Faq {
width: 95%;
padding: 4%;
background-color: #00ced1;
font-size: 1.5vw;
}
.chitawrapper .middle .main .Faq .question {
width: 95%;
padding: 4%;
background-color: #f4a460;
font-size: 1.5vw;
}
.chitawrapper .middle .main .Faq .question .answer {
width: 95%;
padding: 4%;
background-color: BlueViolet;
font-size: 1.5vw;
width: 100%;
display: none;
transition: all 5s ease-in-out;
}
.chitawrapper .middle .main .Faq .question h3 {
width: 95%;
padding: 4%;
background-color: DodgerBlue;
font-size: 1.5vw;
width: 100%;
margin: 0;
padding: 2%;
}
.chitawrapper .middle .main .Faq .question h3:hover ~ .answer {
display: block;
transition: all 5s ease-in-out;
}
note we are changing
display: none;
to display: block;
with hover, accompanied with transition: all 5s ease-in-out;
then I tried to
display: none; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 4s linear;
to display: block; visibility: visible; opacity: 1; transition: visibility 0s, opacity 4s linear;
neither worked for me, so how can I make
smooth transition for accordion hover only with css
?Answer for: "smooth transition for changing display in accordion hover only with css"...