如何使用javascript进行转换？

另一个想法是使用伪元素代替 <hr>

html {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  background-color: red;
}

#container {
  width: 50%;
  height: 100%;
  padding: 5rem;
  background-color: white;
  margin: auto;
}

#expand {
  width: 100%;
  height: 100px;
  background: red;
  transition: height 1s;
  text-align: center;
  position: relative;
}

#expand:before,#expand:after {
  content: '';
  width: 5rem;
  height: 1px;
  background: #000;
  transition: width 1s;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#expand:before {
  top: -10px;
}

#expand:after {
  bottom: -10px;
}

#expand:hover {
  height: 200px;
}

#expand:hover:before,#expand:hover:after{
  width: 20rem;
}

<div id="container">
  <div id="expand">
    Learn More
  </div>
</div>

,

如果您创建一个额外的 wrapper 元素，可以通过这种方式完成 :-

html {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  background-color: red;
}

hr {
  transition: width 1s;
  width: 5rem;
}

#container {
  width: 50%;
  height: 100%;
  padding: 5rem;
  background-color: white;
  margin: auto;
}

#expand {
  width: 100%;
  height: 100px;
  background: red;
  transition: height 1s;
  text-align: center;
}

#expand:hover {
  height: 200px;
}

#wrapper:hover>hr {
  width: 20rem;
}

<div id="container">
<div id="wrapper">
  <hr>
  <div id="expand">
    Learn More
  </div>
  <hr>
  </div>
</div>

,

好吧，使用此 #expand:hover~hr 您正在选择 #expand:hover 的任何一般后继兄弟姐妹，并且在 css 中无法选择以前的兄弟姐妹。为了使代码正常工作，将两个 hr 放入一个公共父级并应用 hover hr 选择器。你的情况

代码笔：https://codepen.io/pranaynailwal/pen/wvgwvea

替换：

#expand:hover~hr {
  width: 20rem;
}

到：

#container:hover hr {
  width: 20rem;
}

没有办法倒退兄弟姐妹的样式。

你可以简单地改变

#expand:hover~hr {
    width: 20rem;
}

到

#container:hover hr {
    width: 20rem;
}

使用 Javascript，您可以添加：

<script>
  const hrElements = document.querySelectorAll("hr");

  function addClass() {
    hrElements.forEach(el => el.setAttribute("class","bigger"))
  }

  function removeClass() {
    hrElements.forEach(el => el.setAttribute("class",""))
  }
<script>

编辑以澄清 包括所有这些css

html {
  margin: 0;
  height: 100%;
  min-height: 100%;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  background-color: red;
}

hr {
  transition: width 1s;
  width: 5rem;
}

#container {
  width: 50%;
  height: 100%;
  padding: 5rem;
  background-color: white;
  margin: auto;
}

#expand {
  width: 100%;
  height: 100px;
  background: red;
  transition: height 1s;
  text-align: center;
}

#expand:hover {
  height: 200px;
}

.bigger {
  width: 20rem;
}

然后只需编辑 #expand div 以包含链接到这些函数的 onmouseover 和 onmouseout；像这样：

<div id="container">
  <hr />
  <div id="expand" onmouseover="addClass()" onmouseout="removeClass()">
    Learn More
  </div>
  <hr />
</div>