我正在尝试实现一些我认为会很容易的效果:使子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
函数会更好吗?
任何帮助表示赞赏!
答案 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;
}