Hoh to change arrow color/background color when hover-CodePudding

I would like to change both the background color (from transparent to #07b8b5) and the color of the arrow (from #07b8b5 to WHITE) when hover the ss-go-top the button.

I can only change the background color of the button but not the inside arrow's color..

I am a beginner, please if something is missing to understand the question let me know and I'll clarify. Thank you)) –

Here the HTML and CSS code:

ss-go-top {
  z-index: 2;
  opacity: 0;
  border: 2px;
  border-style: solid;
  border-radius: 50%;
  border-color: #07b8b5;
  visibility: hidden;
  -webkit-transform: translate3d(0, 200%, 0);
  transform: translate3d(0, 200%, 0);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: fixed;
  bottom: 8.4rem;
  right: 4rem;
}

.ss-go-top a {
  text-decoration: none;
  border: 2px;
  display: block;
  height: 6.4rem;
  width: 6.4rem;
  border-radius: 50%;
  background-color: transparent;
  -webkit-transition: all .3s;
  transition: all .3s;
  position: relative;
}

.ss-go-top a:hover,
.ss-go-top a:focus {
  background-color: #07b8b5;
}

.ss-go-top svg {
  height: 1.2rem;
  width: 1.2rem;
  position: absolute;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  left: 50%;
  top: 50%;
}

.ss-go-top svg path {
  fill: #07b8b5;
}

.ss-go-top.link-is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

<div >
                <a  title="Back to Top" href="#top">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0l8 9h-6v15h-4v-15h-6z"/></svg>
                </a>
            </div>

CodePudding user response：

Add hover style to SVG path worked for me

ss-go-top {
  z-index: 2;
  opacity: 0;
  border: 2px;
  border-style: solid;
  border-radius: 50%;
  border-color: #07b8b5;
  visibility: hidden;
  -webkit-transform: translate3d(0, 200%, 0);
  transform: translate3d(0, 200%, 0);
  -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: fixed;
  bottom: 8.4rem;
  right: 4rem;
}
.ss-go-top a:hover svg, .ss-go-top a:hover svg path {
    fill: #fff;
}
.ss-go-top a {
  text-decoration: none;
  border: 2px;
  display: block;
  height: 6.4rem;
  width: 6.4rem;
  border-radius: 50%;
  background-color: transparent;
  -webkit-transition: all .3s;
  transition: all .3s;
  position: relative;
}

.ss-go-top a:hover,
.ss-go-top a:focus {
  background-color: #07b8b5;
}

.ss-go-top svg {
  height: 1.2rem;
  width: 1.2rem;
  position: absolute;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  left: 50%;
  top: 50%;
}

.ss-go-top svg path {
  fill: #07b8b5;
}

.ss-go-top.link-is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

<div >
<a  title="Back to Top" href="#top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0l8 9h-6v15h-4v-15h-6z"/></svg>
</a>
</div>

CodePudding user response：

If you want to change the color of the arrow, in that element you only have to change the fill when the parent element has hover or focus...

example:

 .smoothscroll {
        background-color: transparent;
        display: grid;
        place-items: center;
        width: 100px;
        height: 100px;
        border-radius: 50%;
      }
      .smoothscroll svg {
        fill: #07b8b5;
        background-color: transparent;
      }

      .smoothscroll:hover {
        background-color: #07b8b5;
      }
      .smoothscroll:hover svg {
        fill: #ffffff;
      }

<div >
      <a  title="Back to Top" href="#top">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
        >
          <path d="M12 0l8 9h-6v15h-4v-15h-6z" />
        </svg>
      </a>
    </div>

this is to explain... in your case the solution would be to modify a little your css

 ss-go-top {
        z-index: 2;
        opacity: 0;
        border: 2px;
        border-style: solid;
        border-radius: 50%;
        border-color: #07b8b5;
        visibility: hidden;
        -webkit-transform: translate3d(0, 200%, 0);
        transform: translate3d(0, 200%, 0);
        -webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
        position: fixed;
        bottom: 8.4rem;
        right: 4rem;
      }

      .ss-go-top a {
        text-decoration: none;
        border: 2px;
        display: block;
        height: 6.4rem;
        width: 6.4rem;
        border-radius: 50%;
        background-color: transparent;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        position: relative;
      }

      .ss-go-top a:hover,
      .ss-go-top a:focus {
        background-color: #07b8b5;
      }
      .ss-go-top a:is(:hover, :focus) svg {
        fill: #ffffff;
      }

      .ss-go-top svg {
        height: 1.2rem;
        width: 1.2rem;
        position: absolute;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
        left: 50%;
        top: 50%;
        fill: #07b8b5;
      }

      .ss-go-top.link-is-visible {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
      }

<div >
      <a  title="Back to Top" href="#top">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
        >
          <path d="M12 0l8 9h-6v15h-4v-15h-6z" />
        </svg>
      </a>
    </div>

CodePudding user response：

.ss-go-top:hover .smoothscroll{background: #07b8b5;}
.ss-go-top:hover .smoothscroll svg path {fill: #fff;}

Adding path works perfectly, thank you Jaswinder for your help :)