Making the sidebar appear on hover in Quarto

Question

I have a Quarto website with the following yaml header:

project:
  type: website

website:
  title: "Test"
  navbar:
    pinned: true
    background: primary
    left:
      - href: index.qmd
        text: Home
      - about.qmd
  sidebar:
    search: true
    pinned: false
    collapse-level: 1
    contents:
      - section: "Writing in General"
        contents:
          - test.qmd
          - test2.qmd
            
format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

I want to make the sidebar appear on hover. I tried modifying the css but while I can make it disappear, it doesn't reappear on hover. My css is:

#quarto-sidebar a{
  display: none;
}

.parent-element:hover #quarto-sidebar a{
  display: block;
}