访问过的链接不会改变背景颜色

Question

嘿伙计们为这个问题苦苦挣扎了一段时间，但无法解决问题。我在页脚中有社交图标，我想在您访问它或将其悬停时更改颜色，但由于某种原因，如果您将其保留为链接透明，则访问不会更改它的背景颜色。当您在链接的 css 中放置一些背景颜色时，它会在访问时更改它。为什么可以，如何解决，因为我有一个div背景的渐变，我不能把它应用到这个链接背景颜色上？

`# 这是反应代码

import React from 'react'

import {GrFacebookOption, GrInstagram} from "react-icons/gr"
import "./Footer.css"

const Footer = () => {
  return (
    <div className='app__footer'>
      <hr />
      <div className='app__footer-social'>
      <a className='fb' href='https://www.facebook.com/'><GrFacebookOption size={13}/></a>
      <a className='ig' href='asdasdasds' ><GrInstagram size={13}/></a>
      </div>
    </div>
  )
}

export default Footer

这是CSS代码

`.app__footer-social a{
    border: 2px solid #E3E3E4;
    border-radius: 50%;
    margin: 0 0.55rem;
    padding: 0.5rem 0.6rem 0.4rem;
    color: rgba(19, 24, 33, 0.3);
}

.app__footer-social.fb:visited {
    color: #FFFFFF;
    border: 2px solid #2F4A80;
    background-color: #2F4A80;
    box-shadow: 0px 20px 40px rgba(19, 24, 33, 0.3);
}

.app__footer-social .fb:hover {
    color: #FFFFFF;
    background: #4267B2;
    border: 2px solid #4267B2;
    box-shadow: 0px 20px 40px rgba(19, 24, 33, 0.3);
}

.app__footer-social .ig:visited {
    color: #FFFFFF;
    background: #8F2762;
    border: 2px solid #8F2762;
    box-shadow: 0px 20px 40px rgba(19, 24, 33, 0.3);
}

.app__footer-social .ig:hover {
    color: #FFFFFF;
    background: #C13584;
    border: 2px solid #C13584;
    box-shadow: 0px 20px 40px rgba(19, 24, 33, 0.3);
}
`

但是你改变它就可以了

.app__footer-social a{
    border: 2px solid #E3E3E4;
    border-radius: 50%;
    margin: 0 0.55rem;
    padding: 0.5rem 0.6rem 0.4rem;
    color: rgba(19, 24, 33, 0.3);
    background: red
}

Answer 1

在您的 css 中，首先尝试为 a 标签添加默认背景色。

.app__footer-social a {
    background-color: #fff;
}