Question

我正在尝试从此website复制导航菜单。我已经设法在一定程度上工作了，但是当悬停以保持相同的颜色而其他所有都无法更改时，则无法建立服务链接。

.header {
  display: flex;
  width: 100%;
}

.nav {
  width: 80%;
  margin: auto;
  position: relative;
}

.nav a {
  color: #000;
}

.nav ul {
  list-style: none;
  padding: 0;
  width: fit-content;
}

.nav ul:hover a{
  color: #eee !important;
  padding-bottom: 20px;
}

.nav ul li:hover a {
  color: #333;
  padding-bottom: 20px;
}

.nav li:last-child {
  margin: 0;
}

.nav ul li {
  display: inline-block;
  margin: 0 35px 0 0;
}

.three:hover>.sub-menu {
  display: flex;
  opacity: 1
}

.sub-menu {
  height: 200px;
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 100%;
  background: #333;
  display: none;
  opacity: 0;
  left: 0;
  right: 0;
}

<div class="header">
  <div class="nav">
    <ul>
      <li>
        <a class="one">Home</a>
      </li>
      <li>
        <a class="two">About</a>
      </li>
      <li class="three">
        <a class="">Services</a>
        <div class="sub-menu">

          <div class="col-1-4"></div>
        </div>
      </li>
      <li>
        <a class="four">Contact</a>
      </li>
    </ul>
  </div>
</div>

如您所见，我已经更改了无序列表悬停时的链接颜色，这可能不是使它起作用的最佳方法。请，有人可以建议我解决此问题的最佳方法吗？

Answer 1

您已经接近了-您必须从影响dict1 = {"EMP$$1": 1, "EMP$$2": 2, "EMP$$3": 3} print(any("EMP$$" in i for i in dict1)) # True # testing for item that doesn't exist print(any("AMP$$" in i for i in dict1)) # False的规则中删除!important，因为这将覆盖将确保所悬停的项目与其他颜色不同的规则：

.nav ul:hover a

.header {
  display: flex;
  width: 100%;
}

.nav {
  width: 80%;
  margin: auto;
  position: relative;
}

.nav a {
  color: #000;
}

.nav ul {
  list-style: none;
  padding: 0;
  width: fit-content;
}

.nav ul:hover a{
  color: #eee;
  padding-bottom: 20px;
}

.nav ul li:hover a {
  color: #333;
  padding-bottom: 20px;
}

.nav li:last-child {
  margin: 0;
}

.nav ul li {
  display: inline-block;
  margin: 0 35px 0 0;
}

.three:hover>.sub-menu {
  display: flex;
  opacity: 1
}

.sub-menu {
  height: 200px;
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 100%;
  background: #333;
  display: none;
  opacity: 0;
  left: 0;
  right: 0;
}

Here's a good resource，了解<div class="header"> <div class="nav"> <ul> <li> <a class="one">Home</a> </li> <li> <a class="two">About</a> </li> <li class="three"> <a class="">Services</a> <div class="sub-menu"> <div class="col-1-4"></div> </div> </li> <li> <a class="four">Contact</a> </li> </ul> </div> </div>如何影响页面上的其他规则。

悬停更改所有导航链接

1 个答案: