Question

我有一个页脚菜单，但问题是每次我尝试将鼠标悬停在菜单上时，它都会消失……当我将鼠标悬停在链接上时，它会显示很好，但是当我尝试将鼠标悬停在菜单项上时，它就会消失。我怎样才能解决这个问题？我尝试使用填充，但是没有用。

.footer-links {
  display: inline-block;
  font-size: 1.8rem;
  padding: 0 0 0 10px;
  cursor: pointer;
}

.wrapper {
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 0;
}

.footer-links:hover+.drop-up {
  display: block;
}

.drop-up {
  top: auto;
  bottom: 100% !important;
  left: auto;
  right: 0;
  padding: 5px 0;
}

.drop-up::after {
  border-top: 6px solid #FFFFFF;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  content: "";
  display: inline-block;
  left: 45%;
  position: absolute;
  bottom: -6px;
}

.drop-up li {
  padding: 10px;
}

<div class="wrapper">
  <div class="footer-links">+Links</div>
  <ul class="dropdown-menu drop-up" role="menu">
    <li><a href="#">Test</a></li>
  </ul>
</div>

JSFiddle Demo

更新：

.wrapper:hover + .drop-up {
    display: block;
}

Answer 1

请参考您的特定示例，当public Try() { this.a = true; this.b = true; this.c = true; this.d = true; }悬停时，您display:block仅.drop-up：

.footer-links

您可能还希望在悬停.footer-links:hover+.drop-up { display: block; }时显示它：

.drop-up

注意，这是一个非常糟糕的设计决策，如果/当它们之间有.footer-links:hover+.drop-up,.drop-up:hover { display: block; }距离时，它会中断。这里的方法是在两者之间都具有一个包装器，并在包装器的悬停状态下触发菜单打开（扩展到这两个包装器并在它们之间留有空间）。另一个流行的选择是添加一个类来打开菜单，并在短暂的超时后将其从打开器或菜单中删除（javascript）。另一个相当脆弱的解决方案是使用转换延迟（但是，纯CSS解决方案不是我所说的固定代码）。

抛开所有这些，看来您正在尝试使用Bootstrap。
首先，请勿使用引导程序 v3.0.0 ！如果要使用v3，请使用v3的最新可用版本（1px）。它与v3.3.7相同，但没有在启动后发现错误。

此外，即使看起来很肿，也要坚持使用他们的标记（html）。一切都在这里是有原因的。删除其中的一部分，您的下拉列表将在某些设备或响应间隔上停止工作。

这是一个完整的示例：

v3.0.0

$('footer .dropup').on('mouseenter', function() {
  $(this).addClass('open')
}).on('mouseleave', function(e) {
  var du = $(e.target).closest('.open');
  setTimeout(function() {
    if (du.is('.open') && !du.is(':hover')) {
      du.removeClass('open')
    }
  }, 321)
})

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

footer {
  min-height: 60px;
  line-height: 60px;
  background-color: #f5f5f5;
}

footer .dropup {
  display: inline-block;
}

您不需要自定义CSS（我为粘性页脚添加了它）。添加了jQuery以使其在悬停时打开。如果您想要默认的行为（在<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <main role="main" class="container"></main> <footer class="footer"> <div class="container"> <div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropup <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </footer>上打开，请不要使用js）：

尝试将鼠标悬停在页脚菜单上时，菜单会消失

1 个答案: