How to enable scrollbar on hover the element and normally hides the scrollbar?

[montasim]

I wanted to hide the scrollbar normally. But when hover the element I want to display the scrollbar.

[montasim]

Use overflow-scroll in tailwind css

[olx24]

Use overflow-scroll in tailwind css

[Preetiraj3697]

I have a sidebar that contains a scrollbar separately from the whole page scrollbar but it remain displayed. I want to show scrollbar only on hover. In the code below i have a class named "customizescrollbar" to customize the scroll bar and implement on the sidebar but it does not shows the scroll bar even on hover.

.customizescrollbar::-webkit-scrollbar {
    display: none;
}
.customizescrollbar::-webkit-scrollbar: hover {
    width: 8px;
}
.customizescrollbar::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
.customizescrollbar::-webkit-scrollbar-thumb {
    background: #CFCFCF; 
}