我有一个before伪元素,当另一个元素悬停在它上面时,我试图转换它的宽度。
链接到jsFiddle这里
我似乎可以在mouseover上转换元素的宽度,但在mouseleave上我无法转换回0px的宽度。
编辑
我想我解释了我试图做的错事。请参阅下面更新的代码和jsFiddle。我有一个父项,当它悬停在上面时,我需要子项的:before元素的宽度来转换。
<div class="hover">
<div class="transition"></div>
</div>
.hover {
width: 50px;
height: 50px;
background-color: #000;
}
.transition:before {
content: '';
position: absolute;
width: 0px;
height: 0px;
top: -10px;
right: 100%;
background-color: #d3d;
z-index: -1;
-webkit-transition: width 2s;
transition: width 2s;
}
.hover:hover .transition:before {
content: '';
position: absolute;
width: 125px;
height: 70px;
top: -10px;
right: 94%;
background-color: #d3d;
-webkit-transition: width 2s;
transition: width 2s;
}
这主要是一个定位问题。宽度实际上是动画,但悬停时元素的位置将其从视口中移除。
为了在其父元素的上下文中绝对定位元素,必须定位父元素。使用position: relative
是实现这一点的一种快速而简单的方法,但在其他方面保持元素不变。此外,如果您只想在悬停时更改宽度,请只更改宽度。
我仍然不确定你的目标是什么,但我的代码片段应该主要重现你用显示悬停和悬停的动画实现的设计。
.hover { display: inline-block; }
.transition {
position: relative;
width: 50px;
height: 50px;
background-color: #000;
}
.transition::before {
content: "";
position: absolute;
width: 0px;
height: 70px;
top: -10px;
right: 0px;
background-color: #d3d;
z-index: -1;
-webkit-transition: width 2s;
transition: width 2s;
}
.hover:hover > .transition::before { width: 125px; }
<div class="hover">
<div class="transition"></div>
</div>
我优化并更改了你的css。我希望它能帮助你。Jsfidle
.transition {
width: 50px;
height: 50px;
background-color: #000;
position: relative;
}
.transition:before {
content: '';
position: absolute;
width: 0px;
height: 0px;
top: 0;
left: 0;
background-color: #d3d;
z-index: -1;
-webkit-transition: width 2s;
transition: 2s;
}
.transition:hover:before {
width: 125px;
height: 70px;
transition: 2s;
}
<div class="transition"></div>