html - 为什么我的过渡在<hr>上不起作用？

我在一个<div>里有这个<hr>和一个<a>。当有人悬停整件事时，它应该会产生一个流畅的动画。

.wrap:hover div{
  transition: all 2s;
  opacity: 0.6;
}

.wrap:hover hr{
  transition: all 2s linear;
  width: 200px;
}

.image{
  background-color: red;
  padding: 20px;
}

hr{
  min-width: 20px;
  float: left;
}

<a class="wrap">
  <div class="image">
     Content
  </div>
  <hr class="hr-animation">
</a>

转换在<div>下工作。但为什么我的<hr>不是液体？

最佳答案

您需要指定一个宽度，以开始并放置hr的过渡，而不是悬停。

.wrap:hover div {
  transition: all 2s;
  opacity: 0.6;
}

.wrap:hover hr {
  width: 200px;
}

.image {
  background-color: red;
  padding: 20px;
}

hr {
  min-width: 20px;
  float: left;
  transition: all 2s linear;
  width: 20px;
}

<a class="wrap">
  <div class="image">
    Content
  </div>
  <hr class="hr-animation">
</a>

关于html - 为什么我的过渡在<hr>上不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45590010/