具有悬停效果的 Instagram 图标

Question

我有以下 instagram 图标，当我将鼠标悬停时，我希望背景变为白色，图标变为彩色

在Footer.js中：

                         <a href="https://www.instagram.com/">
                            <FaInstagram   className='instagram'/>
                        </a>

在Footer.css中：

            .instagram{
    font-size: 2rem ;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: #fff;
    margin: 10px;
    border-radius: 20%;
}

.instagram:hover{
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    border-radius: 20%;
    transform: scale(1.5);
    color:transparent;
}

https://codesandbox.io/s/musing-framework-j5564?file=/src/App.js

Answer 1

您可以在 Footer.css

中使用类似下面的代码

.instagram:hover{
    background: #fff;
    transform: scale(1.5);
    color: #fd5949;
}

具有悬停效果的 Instagram 图标

Instagram icon with hover effect

css

instagram

reactjs