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/

Answer 1

不确定这就是您想要的，但是默认情况下隐藏图标并在鼠标悬停时显示，这是您可以执行的操作：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; */
}

Answer 2

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

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

Answer 3

将其替换为您的CSS：

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

我有sidenav。当我在<a>标记内使用<i>标记时，则不显示对最后一个.menu-icons类不起作用的属性。 Pl

3 个答案: