Question

当我将鼠标悬停在导航栏#categories上时，我试图显示div（#list），但我没有发现问题。它无法正常工作，甚至我没有显示的项目都没有。

我正在尝试使用#main #div #this:hover + #list {}，但仍然无法使用。我不知道我要去哪里错了。

当我将鼠标悬停在#categories上时，我想显示#list。

任何人都可以解决吗？

#list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

#list {
  width: 100px;
  background: tomato;
  position: absolute;
  top: 55px;
  left: 130px;
  display: none;
}

#main #div #this:hover #list {
  background: red;
  display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav id="main" class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div id="div" class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li id="this" class="nav-item">
        <a class="nav-link" href="#">categories</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>
<br>


<div id="list">
  <ul>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
  </ul>
</div>

Answer 1

如果将#list移到#this中，就可以使它起作用：

<li id="this" class="nav-item">
  <a class="nav-link" href="#">categories</a>
  <div id="list">
    <ul>
      <li>Banana</li>
      <li>Banana</li>
      <li>Banana</li>
      <li>Banana</li>
      <li>Banana</li>
      <li>Banana</li>
      <li>Banana</li>
      <li>Banana</li>
    </ul>
  </div>
</li>

演示

#list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

#list {
  width: 100px;
  background: tomato;
  position: absolute;
  top: 55px;
  left: 130px;
  display: none;
}

#main #div #this:hover #list {
  background: red;
  display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav id="main" class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div id="div" class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li id="this" class="nav-item">
        <a class="nav-link" href="#">categories</a>
        <div id="list">
          <ul>
            <li>Banana</li>
            <li>Banana</li>
            <li>Banana</li>
            <li>Banana</li>
            <li>Banana</li>
            <li>Banana</li>
            <li>Banana</li>
            <li>Banana</li>
          </ul>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>
<br>

Answer 2

使用jquery，您可以这样做

$('#categories').hover(function(){
$('#list').slideDown();
$('#list').mouseleave(function(){
$('#list').slideUp();
})
})

#list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

#list {
  width: 100px;
  background: tomato;
  position: absolute;
  top: 55px;
  left: 130px;
  display: none;
}

#main #div #this:hover #list {
  background: red;
  display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav id="main" class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div id="div" class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li id="categories" class="nav-item">
        <a class="nav-link" href="#">categories</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>
<br>


<div id="list">
  <ul>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
    <li>Banana</li>
  </ul>
</div>

Answer 3

您需要添加onclick类

 $(Onclick() {                     
  $(".navbar-toggler").click(function() { 
    $(this).addClass("active");     
  });
});

然后在CSS课堂中主动添加DIsplay：block

Answer 4

尝试一下：

<nav id="main" class="navbar navbar-expand-md bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div id="div" class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li id="this" class="nav-item">
        <a class="nav-link" href="#">categories</a>
        <ul id="list">
          <li>Banana</li>
          <li>Banana</li>
          <li>Banana</li>
          <li>Banana</li>
          <li>Banana</li>
          <li>Banana</li>
          <li>Banana</li>
          <li>Banana</li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

和样式：

 #list {
    display: none;
}
#main #div #this:hover  > #list {
    display: block;
}

在导航项目“未显示div”上进行引导悬停？

4 个答案: