Question

遇到问题，如果您尝试将鼠标悬停在左侧的按钮上，则在显示画布时它们不起作用。如果切换到display：none;然后悬停工作正常。我完全不明白为什么。

这是包含所有代码的jsfiddle。有趣的是，它适用于jsfiddle，但它不适用于chrome，即firefox。 https://jsfiddle.net/9nc22xuy/

编辑：#openscene是画布ID

.mode{
  width:200px;
  background:#e3e3e3;
  line-height: 50px;
  text-align:center;
  font-weight:bold;
  color: #333;
  border-radius:5px;
  margin-bottom:20px;
  margin-left:22.5px;
  transition: all 400ms
}

#openscene{
  background:black;
  margin-right:250px;

  position:relative;
  left:235px;
  border-top:135px solid #CCC;
  border-bottom:135px solid #CCC;
  border-right:10px solid #ccc;
  border-left:10px solid #ccc;


}

#left-side-wrapper {
  margin-left: -250px;
  left: 250px;
  width: 250px;
  background: #CCC;
  position: fixed;
  height: 100%;
  text-align: center;
  display:block;
  
}

.mode#one{
  margin-top:20px;
}

.mode:hover {
  background:#333;
  color:#FFFFFF;
  cursor:pointer;
}

<div id="button-wrapper">
    <div class="mode" id="one">25 Card Timed</div>
    	 
    <div class="mode" id="two">50 Card Timed</div>

    <div class="mode" id="three">25 Card 4 Miss</div>

    <div class="mode" id="four">50 Card 4 Miss</div>
</div>

Answer 1

您的.container-fluid覆盖了左侧菜单，并阻止按钮上的:hover效果。

无论如何，我建议最快的调整是将菜单放在上面：

将z-index: 1;添加到#left-side-wrapper。

另一个会让.container-fluid内的内容少于12列，这就是与左侧菜单折叠的内容（尝试将.col-md-12偏移到.col-md-10和.col-md-offset-2以及你＆＃39 ;看到你可以再次盘旋）但它需要一些课程调整。

CSS悬停伪类和画布交互？

1 个答案: