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

时间:2019-11-19 12:30:37

标签: html css

我正在尝试实现一些我认为会很容易的效果:使子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函数会更好吗?

任何帮助表示赞赏!

1 个答案:

答案 0 :(得分: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;
}