Question

如果我将鼠标悬停在另一个div上，我的actie tab / div会被推出。当你将鼠标悬停在另一个div上时，我希望它只是被推到屏幕的一侧。您可能看不到它被推出，因为.top_menu处于溢出状态：隐藏;但如果你看，当你将鼠标悬停在标签/ div上时，你可以看到它不平滑。

请告诉我如何解决这个问题或向我解释如何更好地做到这一点。我希望顶栏在两侧有两个大的div，在中间有两个较小的div。就像当你不在它们上面时看到它一样。但我也希望能够通过悬停扩展它们。

但是我不希望它放大悬停，因为我打算将图像放在div中。

编辑：我也希望它使用整个顶部栏，否则我在侧面有这些奇怪的黑条，如果我在2个较大的标签之一中放入白色图像。

$(window).on("scroll touchmove", function() {
  $('.top_menu').toggleClass('tiny', $(document).scrollTop() > 0);
});

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1.0);
  background-position: center;
}
.content {
  width: 75%;
  height: 100%;
  top: 200px;
  margin-left: auto;
  margin-right: auto;
  background-color: rgba(38, 38, 38, 0.80);
}
.top_menu {
  width: 100%;
  height: 200px;
  background-color: rgba(0, 0, 0, 1.00);
  text-align: center;
  position: fixed;
  overflow: hidden;
  transition: height 500ms, background 500ms;
}
.top_menu.tiny {
  height: 30px;
  background-color: rgba(0, 0, 0, 0.75);
}
.top_home {
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: rgba(58, 185, 254, 1.00);
  overflow: hidden;
  height: 200px;
  width: 20%;
  margin: 0px;
  position: relative;
  transition: height 500ms;
  transition: width 500ms;
  -webkit-transition: height 500ms;
  -webkit-transition: width 500ms;
  display: inline-block;
}
.top_home:hover {
  height: 200px;
  width: 30%;
}
.top_button {
  border-right-style: solid;
  border-right-width: 2px;
  border-right-color: rgba(58, 185, 254, 1.00);
  overflow: hidden;
  height: 200px;
  width: 10%;
  margin: 0px;
  position: relative;
  transition: height 500ms;
  transition: width 500ms;
  -webkit-transition: height 500ms;
  -webkit-transition: width 500ms;
  display: inline-block;
}
.top_button:hover {
  height: 200px;
  width: 20%;
}
.top_actie {
  overflow: hidden;
  height: 200px;
  width: 20%;
  margin: 0px;
  position: relative;
  transition: height 500ms;
  transition: width 500ms;
  -webkit-transition: height 500ms;
  -webkit-transition: width 500ms;
  display: inline-block;
}
.top_actie:hover {
  height: 200px;
  width: 30%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top_menu">

  <div class="top_home">Home</div>
  <div class="top_button">stuff</div>
  <div class="top_button">stuff</div>
  <div class="top_button">stuff</div>
  <div class="top_button">stuff</div>
  <div class="top_button">stuff</div>
  <div class="top_actie">Actie!</div>

</div>
<div class="content">
  DutchWilliam
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</div>

Answer 1

你有5个按钮（10％x 5 = 50％）和2个更大的按钮（20％x 2 = 40％）。因此，您的按钮使用总宽度的90％。当你胡佛时，你额外增加了10％的宽度。因此90％+ 10％=您可以使用的宽度的100％。但这是问题所在。您的按钮之间也有边框，宽度为2px。所以你有额外的10px。 100％+ 10px = 100 +％，因此不适合。

解决方案：当您悬停按钮（大或小）时，添加额外10％宽度的统计数据，添加8％或其他内容。

.top_home:hover {
  width: 28%;
}

.top_actie:hover {
  width: 28%;
}

.top_button:hover {
  width: 18%;
}

由于悬停的扩大，我的div被推出了

1 个答案: