问单击时图标闪烁。有没有可能阻止这一切？

EN

import React from "react"
import {
  TiHomeOutline,
  TiSocialSkypeOutline,
  TiSocialLinkedin,
  TiSocialFacebook,
} from "react-icons/ti"
import { FiSettings, FiUser, FiMail } from "react-icons/fi"
import { IoIosCode } from "react-icons/io"
import { FaWhatsapp } from "react-icons/fa"

import { Link } from "gatsby"
import "./sidebar.css"
const Sidebar = props => (
  <div className="sidebar">
    <div>
      <div className="site_title">
        <Link to="/">
          <h4>
            {`  develop
            with
            tom
            .com
            `}
          </h4>
        </Link>
      </div>
      <div className="menu_list">
        <ul>
          <li>
            <div class="sidebar_button">
              <Link to="/" activeClassName="user-link">
                <i>
                  <TiHomeOutline size={22} className="user-icon" />
                </i>
                <p className="user-text">HOME</p>
              </Link>
            </div>
          </li>
          <li>
            <div class="sidebar_button">
              <Link to="/about" activeClassName="user-link">
                <i>
                  <FiUser size={22} className="user-icon" />
                </i>
                <p className="user-text">ABOUT</p>
              </Link>
            </div>
          </li>
          <li>
            <div class="sidebar_button">
              <Link to="/skills" activeClassName="user-link">
                <i>
                  <FiSettings size={22} className="user-icon" />
                </i>
                <p className="user-text">SKILLS</p>
              </Link>
            </div>
          </li>

          <li>
            <div class="sidebar_button">
              <Link to="/work" activeClassName="user-link">
                <i>
                  <IoIosCode size={22} className="user-icon" />
                </i>
                <p className="user-text">MY WORK</p>
              </Link>
            </div>
          </li>
          <li>
            <div class="sidebar_button">
              <Link to="/contact" activeClassName="user-link">
                <i>
                  <FiMail size={22} className="user-icon" />
                </i>
                <p className="user-text">CONTACT</p>
              </Link>
            </div>
          </li>
        </ul>
      </div>
      <div className="social_list">
        <ul>
          <li>
            <a href="skype:themcdonagh?chat">
              <i>
                <TiSocialSkypeOutline size={18} className="social-icon" />
              </i>
            </a>
          </li>
          <li>
            <a href="https://api.whatsapp.com/send?phone=447712813592">
              <i>
                <FaWhatsapp size={18} className="social-icon" />
              </i>
            </a>
          </li>
          <li>
            <a href="https://www.linkedin.com/in/tmcdonagh/">
              <i>
                <TiSocialLinkedin size={18} className="social-icon" />
              </i>
            </a>
          </li>
          <li>
            <a href="https://www.facebook.com/MrTomMac">
              <i>
                <TiSocialFacebook size={18} className="social-icon" />
              </i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
)

export default Sidebar

.sidebar {
  background: #2e2e2e;
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 3;
  overflow-wrap: break-word;
}

.sidebar h4 {
  font-family: "Open Sans", sans-serif;
  font-size: 0.7em;
  text-align: right;
  margin-right: 4px;
  color: #9a9a9a;
}

.menu_list {
  position: absolute;
  top: 33vh;
  text-align: center;
  width: 100%;
}

.social_list {
  position: absolute;
  bottom: 1vh;
  text-align: center;
  width: 100%;
  color: #676767;
}

.social_list a {
  color: #676767;
}

.social_list li {
  padding: 0.5vh;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu_list li {
  padding-bottom: 3vh;
}

.sidebar_button {
  /* border: 1px solid #fff; */
  /* height: 50px;
  margin-top: 50px;
  border-radius: 5px; */
  text-align: center;
  /* padding: 10px; */
  /* font-weight: 700; */
  font-size: 0.65em;
  background: transparent;
  position: relative;
}

/* .contactbutton a,
.contactbutton a:link,
.contentbutton a:visited {
  color: #fff;
} */

.sidebar_button p {
  opacity: 0;
  -webkit-transition: all 1s ease 0s;
  -moz-transition: all 1s ease 0s;
  -o-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
}

.sidebar_button a i {
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 25px;
  margin: auto;
}

.sidebar_button a:hover p {
  opacity: 1;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.sidebar_button a:hover i {
  opacity: 0;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.user-icon {
  color: #9a9a9a;
}

.user-text {
  color: #9a9a9a;
}

.user-link .user-icon {
  color: #97b27b;
}

.user-link .user-text {
  color: #97b27b;
}