我有同伴。当我使用 tag then display none property not working on last .menu-icons class. Please help me内的标签>

Question

我有同伴。当我在标签内使用标签，然后显示无属性时，在最后一个.menu-icons类上不起作用。如果我不使用标签显示，则没有属性正在工作。基本上我想让图像在悬停时显示，并且默认图像应该隐藏。

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/

我有同伴。当我在标签内使用标签，然后显示无属性时，在最后一个.menu-icons类上不起作用。如果我不使用标签显示，则没有属性正在工作。基本上我想在...

Answer 1

您需要为a选择last-child标签。

Answer 2

不确定您要的是什么，但是默认情况下隐藏图标并在鼠标悬停时显示，这是您可以执行的操作：https://jsfiddle.net/x741n0jv/2/

Answer 3

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

Answer 4

将其替换为您的CSS：