当我第一次渲染时，将鼠标悬停在侧边栏菜单项上。侧边栏 img 和 div 上出现一些闪烁（如 0.2-0.5s 白色闪光）。
然后在第一次渲染后将鼠标悬停在侧边栏中的所有项目上后，该闪烁不会在第二次出现。
我想第一次就防止这种闪烁。
我尝试过溢出：隐藏在父容器上，背面可见性：隐藏等，但仍然没有运气。
下面是相关的html和css代码
HTML
<div
className={
this.state.sidebarExpanded
? "expanded-sidebar bg-white"
: "sidebar bg-white"
}
onMouseOver={this.expand}
onMouseLeave={this.collapse}
>
<nav className="navbar mt-3 pr-0">
<ul className="navbar-nav side-navbar">
<span title="coming soon">
<li
className="nav-item disabled"
onMouseOver={this.handleHover("dashboard")}
onMouseLeave={this.handleHover("")}
>
<NavLink
className="nav-link sidebar-nav-link py-3"
to="/commerce-studio/dashboard"
>
<span className="menu-items p-0">
<div className="d-flex align-items-center h-30">
<p className="commDashboardImage mb-0"></p>
<p className="sidebar-full-name mt-1">Dashboard</p>
{/* <img src={wip} alt="wip" className="ml-2" /> */}
</div>
</span>
</NavLink>
</li>
</span>
<li
className="nav-item"
onMouseOver={this.handleHover("engageAI")}
onMouseLeave={this.handleHover("")}
>
<NavLink
className="nav-link sidebar-nav-link py-3"
to="/commerce-studio/offerHub"
>
<span className="menu-items p-0">
<div className="d-flex align-items-center h-30">
<p className="engageAIImage mb-0"></p>
<p className="sidebar-full-name mt-1">Offer Hub</p>
</div>
</span>
</NavLink>
</li>
<li
className="nav-item"
onMouseEnter={this.handleHover("oppo")}
onMouseLeave={this.handleHover("")}
>
<NavLink
className="nav-link sidebar-nav-link py-3"
to="/commerce-studio/merchantsHub"
>
<span className="menu-items p-0">
<div className="d-flex justify-content-start align-items-center opportunity-explorer-class h-30">
<p className="opportunityImage mb-0"></p>
<p className="sidebar-full-name mt-1">Merchants Hub</p>
</div>
</span>
</NavLink>
</li>
<li
className="nav-item"
onMouseOver={this.handleHover("campaignHub")}
onMouseLeave={this.handleHover("")}
>
<NavLink
className="nav-link sidebar-nav-link py-3"
to="/commerce-studio/suggestedMerchants"
>
<span className="menu-items p-0">
<div className="d-flex justify-content-start align-items-center opportunity-explorer-class h-30">
<p className="campaignHubImage mb-0"></p>
<p className="sidebar-full-name mt-1">
Suggested Merchants
</p>
</div>
</span>
</NavLink>
</li>
<li
className="nav-item"
onMouseOver={this.handleHover("results")}
onMouseLeave={this.handleHover("")}
>
<NavLink
className="nav-link sidebar-nav-link py-3"
to="/commerce-studio/offerMap"
>
<span className="menu-items p-0">
<div className="d-flex align-items-center h-30">
<p className="resultsMapImage mb-0"></p>
<p className="sidebar-full-name mt-1">Offer Map</p>
</div>
</span>
</NavLink>
</li>
CSS
.com_sidebar_div {
.sidebar {
width: 61px;
height: calc(100vh - 56px);
left: 0px;
position: fixed;
overflow: hidden;
border-right: 1px solid #ebeef1;
-webkit-transition: all 0.5s; /* For Safari 3.1 to 6.0 */
transition: all 0.5s;
// transition-property: border-right, border-width;
// transition-delay: 0.3s;
z-index: 0;
.expanded-sidebar-img {
text-align: center;
padding-right: 56px;
}
.nav-item {
.sidebar-nav-link.active {
.menu-items {
div {
border-right: 2px solid #419e7d;
width: 60px;
-webkit-transition: width 0.4s; /* For Safari 3.1 to 6.0 */
transition: width 0.4s;
height: 24px;
overflow: hidden;
transition-property: border-right, border-width;
transition-delay: 0.5s;
}
.sidebar-full-name {
white-space: nowrap;
}
}
}
}
}
.expanded-sidebar {
width: 220px !important;
overflow: hidden;
height: calc(100vh - 56px);
left: 0px;
position: fixed;
-webkit-transition: all 0.5s; /* For Safari 3.1 to 6.0 */
transition: all 0.5s;
z-index: 1000;
// transition-property: border-right, border-width;
// transition-delay: 0.3s;
.nav-item {
.sidebar-nav-link.active {
.menu-items {
div {
-webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
transition: width 0.5s;
border-right: 2px solid #419e7d;
transition-property: border-right, border-width;
transition-delay: 0.9s;
margin-right: 1px;
width: 220px;
height: 24px;
overflow: hidden;
}
.sidebar-full-name {
color: #419e7d;
white-space: nowrap;
}
}
}
}
}
.sidebar-full-name {
color: #4a5c7b;
font-style: normal;
font-weight: bold;
font-size: 14px;
}
.minimize-text {
cursor: pointer;
}
.toggle-button {
background: transparent;
border: none;
padding-right: 16px;
}
.min-button {
bottom: 0px;
left: 17px;
}
.opportunity-explorer-class {
width: 200px;
}
.navbar {
width: 100%;
overflow: hidden;
padding: 0.5rem 0rem !important;
}
.side-navbar {
width: 205px !important;
// padding-left: 2px !important;
}
.sidebar-nav-link.active:hover {
.commDashboardImage {
background: url(../../../engageStudio/assets/images/dashboard-icon.svg)
no-repeat center;
width: 60px;
padding-right: 58px;
height: 30px;
}
.engageAIImage {
background: url(../../assets/images/offerHubHover.svg) no-repeat center;
width: 60px;
padding-right: 58px;
height: 30px;
}
.opportunityImage {
background: url(../../assets/images/merHubHover.svg) no-repeat center;
width: 60px;
padding-right: 58px;
height: 30px;
}
.campaignHubImage {
background: url(../../assets/images/sugMerHover.svg) no-repeat center;
width: 60px;
padding-right: 58px;
height: 30px;
}
.resultsMapImage {
background: url(../../assets/images/offersMapHover.svg) no-repeat center;
width: 60px;
padding-right: 58px;
height: 30px;
}
// .expanded-sidebar-img {
// background: url(../../../engageStudio/assets/images/maximize-button.svg) no-repeat center;
// padding-right: 60px;
// height: 30px;
// }
.nav-item {
.menu-items {
div {
p {
.sidebar-full-name {
color: #419e7d;
}
}
}
}
}
}
.nav-item:hover {
.menu-items {
div {
-webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
transition: width 0.5s;
border-right: 2px solid #419e7d;
// margin-right: 1px;
width: 220px;
height: 24px;
overflow: hidden;
}
}
.sidebar-full-name {
color: #419e7d;
}
}
.sidebar-nav-link.active {
.commDashboardImage {
background: url(../../../engageStudio/assets/images/dashboard-hover.svg)
no-repeat center;
width: 60px;
padding-right: 58px;
height: 30px;
}
.engageAIImage {
background: url(../../assets/images/offerHubHover.svg) no-repeat center;
width: 60px;
padding-right: 58px;
height: 30px;
}
.opportunityImage {
background: url(../../assets/images/merHubHover.svg) no-repeat center;
width: 60px;
padding-right: 58px;
height: 30px;
}
.campaignHubImage {
background: url(../../assets/images/sugMerHover.svg) no-repeat center;
width: 60px;
padding-right: 58px;
height: 30px;
}
.resultsMapImage {
background: url(../../assets/images/offersMapHover.svg) no-repeat center;
width: 60px;
padding-right: 58px;
height: 30px;
}
.nav-item {
.menu-items {
div {
p {
.sidebar-full-name {
color: #419e7d;
}
}
}
}
}
}
.sidebar-nav-link:hover {
.sidebar-full-name {
color: #419e7d;
}
.commDashboardImage {
background: url(../../../engageStudio/assets/images/dashboard-hover.svg)
no-repeat center;
width: 60px;
padding-right: 30px;
height: 30px;
}
.engageAIImage {
background: url(../../assets/images/offerHubHover.svg) no-repeat center;
width: 60px;
padding-right: 30px;
height: 30px;
}
.opportunityImage {
background: url(../../assets/images/merHubHover.svg) no-repeat center;
width: 60px;
padding-right: 30px;
height: 30px;
}
.campaignHubImage {
background: url(../../assets/images/sugMerHover.svg) no-repeat center;
width: 60px;
padding-right: 30px;
height: 30px;
}
.resultsMapImage {
background: url(../../assets/images/offersMapHover.svg) no-repeat center;
width: 60px;
padding-right: 30px;
height: 30px;
}
}
.commDashboardImage {
background: url(../../../engageStudio/assets/images/dashboard-icon.svg)
no-repeat center;
width: 60px;
padding-right: 30px;
height: 30px;
}
.engageAIImage {
background: url(../../assets/images/offerHub.svg) no-repeat center;
width: 60px;
padding-right: 30px;
height: 30px;
}
.opportunityImage {
background: url(../../assets/images/merHub.svg) no-repeat center;
width: 60px;
padding-right: 30px;
height: 30px;
}
.campaignHubImage {
background: url(../../assets/images/sugMer.svg) no-repeat center;
width: 60px;
padding-right: 30px;
height: 30px;
}
.resultsMapImage {
background: url(../../assets/images/offersMap.svg) no-repeat center;
width: 60px;
padding-right: 30px;
height: 30px;
}
.h-30 {
height: 30px !important;
}
}
.nav-item.disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.4;
}