Question

我正在尝试实现一些我认为会很容易的效果：使子div的父级鼠标悬停时，其宽度会扩大，并使父级的宽度同时变化。 / p>

重点强调了我的问题所在；根据我到目前为止所取得的成就，将鼠标悬停在父级上时，它会立即扩展到最终的总宽度，就好像它在过渡后事先知道其子级的最终宽度一样，而子级的确确实会过渡到该最终宽度。 / p>

以下是说明问题的示例：

.profile {
  cursor: pointer;
  background-color: red;
  border-radius: 100px;
  padding-right: 10px;
  display: inline-flex;
  align-items: center;
}

.profile:hover .name {
  width: 100%;
}

.profile .picture {
  margin-right: 3px;
  display: inline-block;
  padding: 3px;
  width: 27px;
  height: 27px;
}

.profile .picture img {
  border-radius: 50px;
  width: 27px;
  height: 27px;
}

.profile .name {
  transition-property: width;
  transition-duration: 4s;
  width: 0;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}

<div class="profile">
  <div class="picture">
    <img src="https://s.gravatar.com/avatar/090a196b0a7db8a888d3b1af34e55cdc?s=480&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fja.png" alt="Avatar" />
  </div>
  <div class="name">John Doe</div>
</div>

我不明白为什么父母不遵循孩子的宽度。这是否与父母是flex盒子的事实有关？我是否缺少父母的某些财产？我也尝试在父级上添加transition: all 4s，但没有成功。

以某种方式使用translate函数会更好吗？

任何帮助表示赞赏！

Answer 1

这是因为.name类在px中具有宽度，而您的.name:hover在%中具有宽度。

如果要更改宽度过渡，则您的班级及其悬停动作必须使用同一度量单位。

问题是，如果类name的文本是动态的，您将永远不知道过渡时使用它的实际宽度，我已经使用JavaScript和{{ 1}}来设置CSS variables操作中的实际宽度。

这可能不是最佳答案，但至少行得通！。

:hover

let width = document.getElementById('name').offsetWidth;
document.documentElement.style.setProperty('--w', width + "px");
document.getElementById('name').style.width = "0px";

:root{
  --w: 0;
}

.profile {
  cursor: pointer;
  background-color: red;
  border-radius: 100px;
  padding-right: 10px;
  display: inline-flex;
  align-items: center;
}

.profile:hover .name {
  width: var(--w)!important;
}

.profile .picture {
  margin-right: 3px;
  display: inline-block;
  padding: 3px;
  width: 27px;
  height: 27px;
}

.profile .picture img {
  border-radius: 50px;
  width: 27px;
  height: 27px;
}

.profile .name {
  transition-duration: 1s;
  display: inline-block;
  overflow: hidden;
  white-space:nowrap;
}

子元素的宽度过渡不适用于父元素

1 个答案: