Question

我有一个Bootstrap 4导航栏，当您将鼠标悬停在特定链接上时，我希望在其下方显示另一个部分。而且我已经写了所有东西，事情是，它由于某种原因不起作用。我尝试使用var express = require('express') var cors = require('cors') var app = express() app.use(cors()) app.get('/products/:id', function (req, res, next) { res.json({msg: 'This is CORS-enabled for all origins!'}) }) app.listen(80, function () { console.log('CORS-enabled web server listening on port 80') })和a:hover div {}来确保它不是CSS的结构。

有人可以看看，让我知道发生了什么事吗？请全屏打开摘录。

＆＃13;

a:hover + div {}

＆＃13;

.hover {
  background: red;
  display: none;
}

#projects:hover + .hover {
  display: block;
}

＆＃13;

Answer 1

请考虑以下部分

#projects:hover + .hover {
  display: block;
}

每当您将鼠标悬停在#projects上时，它会将显示更改为阻塞在紧跟#projects之后的任何同级元素，但#projects之后没有.hover的元素。所以这永远不会奏效。 .hover容器放在导航栏之外，我相信当你悬停链接时，你想显示.hover容器。

要注意，使用css，您可以编写规则来设置从父级到子级或周围兄弟姐妹的样式元素，但是您不能上链到父级，然后再转到父级兄弟。

一个选项是将该部分放在导航栏内，但这看起来有点难看，以显示导航中的整个部分（我假设你不想要子菜单项）。

你可以用一些javascript（jquery用于更短的解决方案）来实现这一点。下面的解决方案演示了一个悬停在菜单链接上，该链接触发了导航栏外部分.hover的显示

function show() {
  $(".hover").css({
    display: "block"
  })
}

function hide() {
  $(".hover").css({
    display: "none"
  })
}
$("#projects").hover(show, hide)

.hover {
  background: red;
  display: none;
}

#navt {
border:solid red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<nav class="navbar navbar-toggleable-md fixed-top">
  <div class="container">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" id="navt">
                    <span class="navbar-toggler-icon"></span>click here
                </button>
    <a class="navbar-brand" href="/">
      <img src="..." alt="Logo">
    </a>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link active" href="/">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item" id="projects">
          <a class="nav-link" href="#">Projects</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

<div class="hover">
  hover
</div>

Answer 2

您尝试过的方法仅适用于兄弟元素。

示例：两个<div>元素（试一下）

<style type="text/css">
    .faa {
        height:200px;
        width:200px;
        background: blue;

    }
    .boo {
        height:200px;
        width:200px;
        background: yellow;

    }
    .boo:hover ~ .faa{
        display: none;
    }
  </style>

  <div class="boo"></div>
  <div class="faa"></div>

使用 CSS 无法做到这一点，请尝试使用 JQuery 代码块来解决您的问题，

$(function() {
        $("#projects").hover(function(){
            $('.hover').show(400);
        }, function(){
            $('.hover').hide(400);
        });
    });

你可以知道更多， On a CSS hover event, can I change another div's styling?

在悬停时显示div并不适用于Bootstrap 4导航

2 个答案: