是的，因为它被认为是元素的最后一个子元素。所以去掉i标签或者把它放在上面或者中间。像这个
我有侧导航。当我在标记内部使用标记时，displaynone属性不适用于last.menuicons类。如果我不使用标记display none属性正在工作。基本上，我想在悬停时显示一个图像，默认图像应该是隐藏的。
HTML
<div id="mySidenav" class="sidenav" >
<a href="#" class="mt-3">
<embed src="https://image.flaticon.com/icons/svg/271/271888.svg" class="menu-icons">
<embed src="https://image.flaticon.com/icons/svg/2/2204.svg" class="menu-icons">
Dashboard</a>
<a (click)="toggle = !toggle">
<embed src="https://image.flaticon.com/icons/svg/784/784746.svg" class="menu-icons">
<embed src="https://image.flaticon.com/icons/svg/971/971646.svg" class="menu-icons">
Reports <i class="material-icons">keyboard_arrow_right</i></a>
</div>
CSS
.sidenav {
width: 300px;
position: fixed;
z-index: 4;
top: 80px;
bottom:0;
left: 0px;
background-color: white;
overflow-x: hidden;
padding: 10px;
transition: 0.5s;
box-shadow: 0px 0px 8px 3px #ccc;
border-radius: 0 20px;
}
/* The navigation menu links */
.sidenav a {
padding: 15px;
text-decoration: none;
font-size: 16px;
color: #818181;
display: flex;
align-items: center;
white-space: nowrap;
transition: 0.3s ease-in, .7s ease-out;
cursor: pointer;
}
.sidenav a .menu-icons:last-child{display: none;}
.sidenav a:hover {
color: #fff;
background: #0098DB;
box-shadow: 0px 3px 5px 0px #ccc;
border-radius: 5px;
}
.sidenav a:hover .menu-icons:last-child{display: block;}
.sidenav a:hover .menu-icons:first-child{display: none;}
.menu-icons {
height: 20px;
width: 20px;
margin-right: 25px;
display: block;
}
Please check fiddle link
https://jsfiddle.net/jhmf5gv1/
不确定这是你想要的，但要在默认情况下隐藏图标并在悬停时显示，下面是你可以做的：https://jsfiddle.net/x741n0jv/2/
你不需要有一个双图标。
CSS
.sidenav a .menu-icons {display: none;}
.sidenav a:hover .menu-icons{display: block;}
.menu-icons {
height: 20px;
width: 20px;
margin-right: 25px;
/* display: block; */
}
<a (click)="toggle = !toggle">
<i class="material-icons">keyboard_arrow_right</i>
<embed src="https://image.flaticon.com/icons/svg/784/784746.svg" class="menu-icons">
<embed src="https://image.flaticon.com/icons/svg/971/971646.svg" class="menu-icons">
Reports</a>
将其替换为css：
.sidenav a:hover .menu-icons{display: block;}
.sidenav a .menu-icons{display: none;}
.menu-icons {
height: 20px;
width: 20px;
margin-right: 25px;
}