如何解决子菜单中的悬停效果不起作用
我想创建一个下拉菜单,在第二个下拉菜单中显示图像。我已经按照应编写的方式编写了 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 举报,一经查实,本站将立刻删除。