Question

我有一个前伪元素，我试图转换另一个元素悬停的宽度。

链接到jsFiddle here

我似乎能够在鼠标悬停时转换宽度，但在mouseleave上我无法转换回0px的宽度。

修改

我想我解释了我试图做错的方式。请参阅下面的更新代码和jsFiddle。我有一个父项，当我盘旋时，我需要转换子元素的：before元素的宽度。

Found: <td cl<asas> 4 12
Found: </td> 31 5
Found: <td class="played"> 36 19

Answer 1

这主要是定位问题。宽度实际上是动画，但元素在悬停上的定位是将其从视口中移除。

为了将元素绝对定位在其父元素的上下文中，必须定位父元素。使用position: relative是一种快速简便的方法来实现这一点，但另外保持元素相同。此外，如果您只想在悬停时更改宽度，只需更改宽度。

我仍然不确定你的目标是什么，但我的代码片段应该主要重现您使用动画显示的设计，同时显示悬停和关闭。

＆＃13;

.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; }

＆＃13;

<div class="hover">
   <div class="transition"></div>
</div>

＆＃13;

Answer 2

我优化并更改你的CSS。我希望它可以帮到你。 Jsfiddle

＆＃13;

.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;
}

＆＃13;

<div class="transition"></div>

＆＃13;

用于伪前元素的mouseout上的过渡宽度

2 个答案: