Question

我设置了一个侧边栏，将其悬停时显示菜单项名称。当用户进入该特定页面时，菜单项也会变为绿色。

问题在于，单击菜单项后，图标会闪烁一秒钟（请参阅下面的gif）。我想阻止这种情况的发生，只是使文本变成绿色，而没有图标的闪烁。

我想知道是否有人对如何使这种停止发生有任何建议？

我正在使用Gatsby.js（非常类似于React.js）。下面是我的代码的简化版本：

我的JS：

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

我的CSS：

.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;
}

Answer 1

当将其中一个图标设置为活动状态后仍将鼠标悬停在其中一个图标上时，就会出现问题。它仍然会触发您的CSS：

.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-link，我们可以尝试通过添加具有更高特异性的类来覆盖该样式：

.sidebar_button .user-link:hover i {
  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 .user-link:hover p {
  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;  
}

单击时图标闪烁。有可能停止吗？

1 个答案: