Html 我有侧导航。当我使用<；i>；标记内部<；a>；标记，然后显示“无”属性，该属性不适用于last.menu图标类。Pl

我有侧导航。当我在tag中使用tag时，显示none属性在last.menu图标类中不起作用。如果不使用标记显示，则“无”属性不起作用。基本上，我希望在悬停时显示一个图像，默认图像应该是隐藏的

HTML

报告键盘箭头右键

CSS

.sidenav{
宽度：300px；
位置：固定；
z指数：4；
顶部：80px；
底部：0；
左：0px；
背景色：白色；
溢出x：隐藏；
填充：10px；
过渡：0.5s；
盒影：0px 0px 8px 3px#ccc；
边界半径：0 20px；
}
/*导航菜单链接*/
.侧导航a{
填充：15px；
文字装饰：无；
字体大小：16px；
颜色：#818181；
显示器：flex；
对齐项目：居中；
空白：nowrap；
过渡：0.3秒缓进，.7秒缓出；
光标：指针；
}
.sidenav a.菜单图标：最后一个子项{显示：无；}
.侧导航a:悬停{
颜色：#fff；
背景：#0098DB；
盒影：0px 3px 5px 0px#ccc；
边界半径：5px；
}
.sidenav a:hover.menu图标：最后一个子项{display:block；}
.sidenav a:hover.menu图标：第一个子项{display:none；}
.菜单图标{
高度：20px；
宽度：20px；
右边距：25px；
显示：块；
}
请检查小提琴链接
https://jsfiddle.net/jhmf5gv1/

不，我不确定这是您想要的，但要在默认情况下隐藏图标并在悬停时显示，您可以这样做：

你不需要有一个双图标

CSS

---

是的，因为它被认为是元素的最后一个子元素。 因此，移除我的标签或将其放在顶部或中间。 像这样

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

---

为什么？除非我指定哪一个是最后一个子项。是的，但根据DOM，它不是标记的最后一个子项。最后一个子元素表示父元素最后一个元素，但在本例中，标记是最后一个子元素。否则，您的目标如下：最后一个子菜单图标：第n个最后一个子菜单（2）。

.sidenav a:hover .menu-icons{display: block;}
.sidenav a .menu-icons{display: none;}
.menu-icons {
 height: 20px;
 width: 20px;
 margin-right: 25px;
}