Custom Header

Site URL: https://sapphire-tarantula-yjf5.squarespace.com/about

I am new to CSS but have managed to get so far building a custom website.

I have managed to replace the page names in the header with icons - one relevant to each page of the website

However,  when on the selected page, the icon relevant to that page disappears from the header. How do I stop that happening?

The other thing I'd like is for the header icons to be replaced by a different image when I hover over them too. Is that possible? Current CSS for the header is as follows:

 

.header-title-logo a:hover img {
  visibility: hidden;
}
.header-title-logo a:hover {
  background-image: url('https://static1.squarespace.com/static/62f281574000c736859737c0/t/62f4c04f683a34534353bba8/1660207184002/Young+Poet+Logo+Off+White+RGB.png');
  background-size: contain;
}
/* About */
.header-announcement-bar-wrapper [href="/about"] {
   height: 100px;
  width: 100px;
    background-image: url(https://static1.squarespace.com/static/62f281574000c736859737c0/t/62f3d0ce2bd9ea019639e89d/1660145870369/Shape+of+sound+texture+1+Deep+Black+RGB.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right right;
    color: transparent !important;
}

/* Artists */
.header-announcement-bar-wrapper [href="/artists"] {
   height: 100px;
  width: 100px;
    background-image: url(https://static1.squarespace.com/static/62f281574000c736859737c0/t/62f3d0efc5d983332cd5ef88/1660145903483/Shape+of+sound+texture+4+Deep+Black+RGB.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right right;
    color: transparent !important;
}
/* Store */
.header-announcement-bar-wrapper [href="/store"] {
   height: 100px;
  width: 100px;
    background-image: url(https://static1.squarespace.com/static/62f281574000c736859737c0/t/62f3d0d9ab04002143fd6cda/1660145881907/Shape+of+sound+texture+2+Deep+Black+RGB.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right right;
    color: transparent !important;
}
/* Contact */
.header-announcement-bar-wrapper [href="/contact"] {
   height: 100px;
  width: 100px;
    background-image: url(https://static1.squarespace.com/static/62f281574000c736859737c0/t/62f3d0e3ab04002143fd6d19/1660145891327/Shape+of+sound+texture+3+Deep+Black+RGB.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right right;
    color: transparent !important;
}

Hi. The site is private. Can you setup an access password? We can check easier