How to display scrollbar on Hover?

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; 
    }