我试图创建一个悬停效果来显示“指南”上的链接,我希望它与本网站上的类似:https://www.codingnepalweb.com/,我设法只创建了向下箭头对于它,但是似乎很难使用 :active
和 :hover
伪类使效果起作用。
nav ul>li.guide-down>a:after {
content: '\f078';
text-align: right;
font-family: 'Font Awesome 5 Free';
font-size: 9px;
font-weight: 900;
margin: -1px 0 0 5px;
}
nav ul>li>ul {
position: absolute;
float: left;
left: 0;
top: 60px;
width: 180px;
background-color: #1e232b;
z-index: 99999;
visibility: hidden;
opacity: 0;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
padding: 0;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 15%), 0 2px 10px 0 rgb(0 0 0 / 17%);
}
.dropdown:hover {
cursor: pointer;
}
.dropdown:active {
background-color: #1E232B;
cursor: progress;
}
.dropdown:hover+.dropdown-content {
display: block;
}
<div id="mainListDiv" class="main_list">
<ul class="navlinks">
<li><a href="#">Post your Inquiry</a></li>
<li><a href="#">Sell on Airduka</a></li>
<li class="dropdown">
<a href="#">Guides</a>
<ul class="dropdown-content">
<li><a href="#">How it Works</a></li>
<li><a href="#">Buyer's Guide</a></li>
<li><a href="#">Seller's Guide</a></li>
</ul>
</li>
<li><a href="#">Sign-In</a></li>
答案 0 :(得分:0)
您的问题似乎是您使用了不正确的 CSS 选择器。 + 选择器选择紧跟在它前面的元素之后的元素。这意味着 .dropdown:hover + .dropdown-content 只有在 .dropdown 被悬停之后才选择 .dropdown-content 。此外,当 .dropdown 未悬停时,您需要隐藏 .dropdown-content。
在学习时,最好保留 MDN's guide on selectors open 之类的内容,或者找一份 CSS 选择器备忘单以备不时之需。
您可以通过重写 CSS 或重新排列 HTML 来解决此问题。
.dropdown:hover {
cursor: pointer;
}
.dropdown:active {
background-color: #1E232B;
cursor: progress;
}
/* Hide .dropdown-content by default. */
.dropdown-content {
display: none;
}
/* Given your HTML, a child selector (>) works because you're selecting an element that's inside .dropdown. Note that this selector only select an element that's directly within .dropdown and not within another element inside .dropdown. */
.dropdown:hover>.dropdown-content {
display: block;
}
<div id="mainListDiv" class="main_list">
<ul class="navlinks">
<li><a href="#">Post your Inquiry</a></li>
<li><a href="#">Sell on Airduka</a></li>
<li class="dropdown">
<a href="#">Guides</a>
<ul class="dropdown-content">
<li><a href="#">How it Works</a></li>
<li><a href="#">Buyer's Guide</a></li>
<li><a href="#">Seller's Guide</a></li>
</ul>
</li>
<li><a href="#">Sign-In</a></li>
</ul>
</div>