Question

我试图创建一个悬停效果来显示“指南”上的链接，我希望它与本网站上的类似：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>

Answer 1

您的问题似乎是您使用了不正确的 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>

悬停时，显示链接

1 个答案: