Question

HTML：

<ul>
    <li class="nav-item">
      <a>Hello</a>
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
    </li>
  </ul>

CSS：

*{
  list-style: none;
  text-decoration: none;
  padding: 0;
  margin: 0;
}
.nav-item{
  position: relative;
  margin-left: 50px;
  margin-top: 20px;
}
    .nav-item >a{
      background: gray;
      width: 100px;
      text-align: center;
      display: inline-block;
    }
    .nav-item > ul{
        position: relative;
        display: none;
        width: 100px;
    }
      .nav-item > ul > li{
        background: yellow;
        opacity: 0.4;
        display: block;
        text-align: center;
      }
    .nav-item > a:hover + ul{
        display: block;
    }
    .nav-item > ul :hover {
      display: block;
    }

问题是，当我将鼠标悬停在下拉菜单上时，它会如何阻止它？我尝试使用

    .nav-item > ul :hover {
      display: block;
    }

在悬停时不要隐藏它，但它不能解决问题。我试图谷歌但我找不到任何解决方案，请帮帮我。谢谢你的帮助。

Answer 1

删除ul和:hover之间的空格：

.nav-item > ul:hover {
  display: block;
}

请参阅小提琴here

Answer 2

根据我的理解：

使用以下代码，当您将鼠标悬停在display:block（在导航项目中）时，将其设为.nav-item > ul {display : none}，但实际上它隐藏了.nav-item > ul :hover { display: block; }，那么您如何将鼠标悬停在它上面？

.nav-item :hover {
  display: block;
}

如果您从中移除UL并保持如下，即使这样也可以。

public GameObject mainObj;

void Start () {
    mainObj.GetComponent<MeshRenderer> ().material.color.a = 1.0f;
}

注意：如果要根据其他元素修改元素，则应使用jquery。

当鼠标悬停在项目

2 个答案: