自定义菜单：在鼠标悬停时更改 5 个 div 的宽度并保持 100% 站点宽度时出现问题

Question

我想做一个包含 5 个字段的简单自定义菜单。 鼠标悬停时，鼠标下方的字段应扩大宽度。 因此其他字段的宽度必须缩小。

到目前为止一切都很好，但问题是，过渡函数并不是真正的线性，并且当鼠标在菜单字段上快速变化时，菜单的总宽度会不受控制地变化。

有人知道针对该问题的更优雅但首先更实用的解决方案吗？

到目前为止我的代码如下：

function kr_menue(id) {
  document.getElementById('id-m1').style.width = "17%";
  document.getElementById('id-m2').style.width = "17%";
  document.getElementById('id-m3').style.width = "17%";
  document.getElementById('id-m4').style.width = "17%";
  document.getElementById('id-m5').style.width = "17%";
  document.getElementById(id).style.width = "32%";
  return true;
}

function kr_menue0(id) {
  document.getElementById('id-m1').style.width = "20%";
  document.getElementById('id-m2').style.width = "20%";
  document.getElementById('id-m3').style.width = "20%";
  document.getElementById('id-m4').style.width = "20%";
  document.getElementById('id-m5').style.width = "20%";
  return true;
}

.menue0 {
  float: left;
  border: 1px solid white;
  margin: 0px;
  height: 300px;
  background-color: grey;
  justify-content: center;
  transition: width 1s linear;
}

.menue0:hover {
  cursor: pointer;
}

#id-m1 {
  width: 20%;
}

#id-m2 {
  width: 20%;
}

#id-m3 {
  width: 20%;
}

#id-m4 {
  width: 20%;
}

#id-m5 {
  width: 20%;
}

<div onmouseout="kr_menue0()">
  <div class="menue0" id="id-m1" onmouseover="kr_menue('id-m1')"> Menue 1</div>
  <div class="menue0" id="id-m2" onmouseover="kr_menue('id-m2')"> Menue 2</div>
  <div class="menue0" id="id-m3" onmouseover="kr_menue('id-m3')"> Menue 3</div>
  <div class="menue0" id="id-m4" onmouseover="kr_menue('id-m4')"> Menue 4</div>
  <div class="menue0" id="id-m5" onmouseover="kr_menue('id-m5')"> Menue 5</div>
</div>

/* 结果 ****************** */ https://kristallvelo.ch/test-seite/

Answer 1

正如 dantheman 指出的，这里不需要 javascript。有很多方法可以做到这一点，但这是一种。

摆脱 JavaScript 并在 CSS 中完成所有操作。按如下方式修改 CSS，但请确保将

div

包装在包装元素中。我刚刚用了另一个

div

。

基本上，您使用

flex

属性来管理元素宽度。您告诉包装器要灵活，在每个元素之间添加空间以适合容器（在本例中为

.menues

），并且每个

.menue0

元素都是拉伸/收缩的东西。您可以将每个

flex-basis

百分比修改为您喜欢的任何内容。

.menues {
  display: flex;
  justify-content: space-between;
}

.menue0 {
  flex-basis: 20%;
  border:1px solid white; 
  height:300px; 
  background-color:grey; 
  cursor:pointer;
  transition: all 0.5s;
}

.menue0:hover {
  flex-basis: 32%;
}

<div class="menues">
  <div class="menue0">Menu 1</div>
  <div class="menue0">Menu 2</div>
  <div class="menue0">Menu 3</div>
  <div class="menue0">Menu 4</div>
  <div class="menue0">Menu 5</div>
</div>

Answer 2

如果你的容器是flex的，你可以使用css悬停来实现你想要的，而不是使用js：

.menu {
  display: flex;                  /* make parent flex */
}

.menue0 {
  display: flex;
  box-sizing: border-box;        /* add this so border is part of your width */
  width: 20%; 
  border: 1px solid white;
  margin: 0px;
  height: 300px;
  background-color: grey;
  justify-content: center;
  transition: width 1s linear;
  flex-grow:1;                   /* add this so that all columns always take up full width of parent */
}

.menu:hover .menue0 {
  width: 17%;                    /* change children to 17% when parent is hovered */
}

.menu .menue0:hover {
  width: 32%;                    /* change hovered child to 32% */
}

<div class="menu">
  <div class="menue0" id="id-m1"> Menue 1</div>
  <div class="menue0" id="id-m2"> Menue 2</div>
  <div class="menue0" id="id-m3"> Menue 3</div>
  <div class="menue0" id="id-m4"> Menue 4</div>
  <div class="menue0" id="id-m5"> Menue 5</div>
</div>

Answer 3

根据我的经验，过渡计时功能：缓入出在这种情况下效果最好。我还重组了你的代码以使用 Flexbox。

.menu {
  width: 100%;
  display: flex;
  flex-direction: row;
}
.menu-item {
  height: 50px;
  flex-grow: 1.5;
  background-color: gray;
  border: 1px solid white;
  transition:flex-grow 1s ease-in-out;
}
.menu-item:hover {
  flex-grow: 2;
}

<div class="menu">
  <div class="menu-item"> Menu 1</div>
  <div class="menu-item"> Menu 2</div>
  <div class="menu-item"> Menu 3</div>
  <div class="menu-item"> Menu 4</div>
  <div class="menu-item"> Menu 5</div>
</div>

Answer 4

非常感谢！你太棒了！！！

带有flex的版本效果非常好，结果非常流畅。