Hi,
I added following CSS to a react app. Locally, It works properly. But after deployment, It does not work.
.b-button {
opacity: 0;
}
.n-card:hover .b-button {
opacity: 100%;
transition-duration: 0.3s;
transition-timing-function: ease-in;
}
textarea {
resize: none;
}
Could anyone let me know what the issue is?
Hi @tech_guy
Can you please share the URL where this issue is evident.
@coelmay
Sorry I didn’t get
What element on the page does the CSS apply to?
Hi @coelmay
If you meant the page it is the “/” page.
if you meant the component that css applied, it is the card component which is in the first page. It should be like below when it hover.
(Buy button should be shown when it hover)
The class on the element is not b-button
, it is buy-button
. The opacity
is set to 0
which means it is invisible. Set it to 1
Don’t use percent values as these are often changed to 0
during build. Use decimal values, e.g. 50%
→ 0.5
, 65%
→ 0.65
.
1 Like
Thank you. That opacity set to 1 is worked. (btw I already used buy-button on my code.)
hillary
October 25, 2022, 10:36pm
10
Thanks for sharing that solution, @coelmay ! Happy building, @tech_guy !