當 hover 超過元素時改變顏色

Question

當您用鼠標在箭頭上 hover 時如何更改箭頭的顏色？

請參考我試圖實現這一點的代碼片段（順便說一句，55.5 等百分比是故意的），我哪里出錯了？

.arrow-down {
  width: 100%;
  margin: 0 auto;
  left: 55,5%;
}

.arrow-down::after {
  content: "";
  width: 50px;
  height: 50px;
  position: absolute;
  margin: auto;
  border-right: 4px solid rgba(255, 255, 255, 0.5);
  border-bottom: 4px solid rgb(255, 255, 255, 0.5);
  -webkit-transform: rotate(40deg);
  transform: rotate(45deg);
  -webkit-animation: 3s arrow infinite ease;
  animation: 3s arrow infinite ease;
  left: 48.25vw;
  bottom: -15vw;
}

.arrow-down:hover {
  color:white;
}

@-webkit-keyframes arrow {
  0%,
  100% {
    top: 50px;
  }
  50% {
    top: 80px;
  }
}

@keyframes arrow {
  0%,
  100% {
    top: 50px;
  }
  50% {
    top: 80px;
  }
}

任何幫助是極大的贊賞。

Answer 1

 body { background-color: black }.arrow-down { width: 100%; margin: 0 auto; left: 55,5%; }.arrow-down::after { content: ""; width: 50px; height: 50px; position: absolute; margin: auto; border-right: 4px solid rgba(255, 255, 255, 0.5); border-bottom: 4px solid rgb(255, 255, 255, 0.5); -webkit-transform: rotate(40deg); transform: rotate(45deg); -webkit-animation: 3s arrow infinite ease; animation: 3s arrow infinite ease; left: 48.25vw; bottom: -15vw; }.arrow-down:hover::after { border-right: 4px solid white; border-bottom: 4px solid white; } @-webkit-keyframes arrow { 0%, 100% { top: 50px; } 50% { top: 80px; } } @keyframes arrow { 0%, 100% { top: 50px; } 50% { top: 80px; } }

 <div class="arrow-down"> </div>

請注意，箭頭 colors 已設置::after not on .arrow-down

您需要更改這些 css styles

  border-right: 4px solid rgba(255, 255, 255, 0.5);
  border-bottom: 4px solid rgb(255, 255, 255, 0.5);

嘗試這個

.arrow-down:hover::after {
  border-right: 4px solid white;
  border-bottom: 4px solid white;
}