微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

子菜单中的悬停效果不起作用

如何解决子菜单中的悬停效果不起作用

我想创建一个下拉菜单,在第二个下拉菜单显示图像。我已经按照应编写的方式编写了 CSS 代码,并且我认为我的 HTML 代码的结构也没有问题。因此,将鼠标悬停在 Afyon White 列表项上后,应该会显示一个图像(位置尚未调整),但没有显示。有什么建议吗?

/* regardless */
li {
  list-style: none;
  text-transform: uppercase;
}

/* theme.scss */
.MegaMenu__Inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: Nowrap;
  flex-direction: column;
  margin: 0 auto;
  padding: 0 10px;
}

@media screen and (min-width: 1240px) {
  .MegaMenu__Inner {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* sca-jqueryblabla.scss */

.MegaMenu__Item {
  display: inline-block;
  position: relative;
  width: 5rem;
  transition: all 0.9s ease-in-out;
}

.MegaMenu__Item > .MegaMenu__Title {
  display: inline-block;
}

.MegaMenu__Item > .MegaMenu__Title:hover {
  transition: all 0.9s ease-in-out;
}

.MegaMenu__Title--dropdown {
  display: none;
  position: absolute;
  z-index: 1;
  width: 100%;
  margin-top: -1.5rem;
  margin-left: 4rem;
  width: 100%;
  transition: all 0.9s ease-in-out;
}

.DropdownList--li {
  width: 9rem;
  padding: 0.4rem;
}

.MegaMenu__Title--dropdown .DropdownList {
  display: block;
  position: relative;
}

.MegaMenu__Item:hover .MegaMenu__Title--dropdown {
  display: block;
  transition: all 9s ease-in-out;
}

.MegaMenu__Item.MegaMenu__Item--fit {
  cursor: pointer;
  padding: 0.5rem;
  text-align: center;
  background-color: white;
}

.MegaMenu__Item.MegaMenu__Item--fit a {
  text-decoration: none;
  color: #5c5c5c;
}

.MegaMenu__Item {
  position: relative;
}

.Linklist {
  position: absolute;
}

.DropdownList {
  position: relative;
  display: inline-block;
}

.color-nav {
  display: none;
  position: absolute;
  width: 10rem;
  height: 10rem;
  border: 3px solid black;
}

.DropdownList--li:hover .color-nav {
  display: inline-block;
}
<div class="MegaMenu__Item MegaMenu__Item--fit">
              <a href="" class="MegaMenu__Title heading Text--subdued u-h7"
                >White</a>
              <div class="MegaMenu__Title--dropdown">
                <ul class="DropdownList DropdownList_White">
                  <li class="DropdownList--li DropdownList_White--li">
                    <a>Afyon White</a>
                  </li>
                  <div class="color-nav">
                    <img src="" alt="">
                  </div>
                  </ul>
               </div>
</div>

解决方法

以下<div>

 <div class="color-nav">
         <img src="" alt="">
 </div>

应该在具有类 <li>DropdownList--li DropdownList_White--li 内,以便能够根据您的 CSS 进行选择,即:

.DropdownList--li:hover .color-nav {
  display: inline-block;
}

也就是说,在上面,您选择 .color-nav 作为 .DropdownList--li 的子代,但在您的 HTML 中,.color-nav 不是它的子代。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。