如何使用javascript进行转换？

我试图让

两者都转换，但我仅限于使用css选择较低的

。

html{
保证金：0；
身高：100%；
最小高度：100%；
}
身体{
保证金：0；
身高：100%；
最小高度：100%；
背景色：红色；
}
人力资源{
过渡：宽度1s；
宽度：5雷姆；
}
#容器{
宽度：50%；
身高：100%；
填充：5rem；
背景色：白色；
保证金：自动；
}
#扩展{
宽度：100%；
高度：100px；
背景：红色；
过渡：高度1s；
文本对齐：居中；
}
#展开：悬停{
高度：200px；
}
#展开：悬停~hr{
宽度：20雷姆；
}

了解更多

如果创建附加的

包装器

元素，可以通过以下方式完成：-

html{
保证金：0；
身高：100%；
最小高度：100%；
}
身体{
保证金：0；
身高：100%；
最小高度：100%；
背景色：红色；
}
人力资源{
过渡：宽度1s；
宽度：5雷姆；
}
#容器{
宽度：50%；
身高：100%；
填充：5rem；
背景色：白色；
保证金：自动；
}
#扩展{
宽度：100%；
高度：100px；
背景：红色；
过渡：高度1s；
文本对齐：居中；
}
#展开：悬停{
高度：200px；
}
#包装器：悬停>人力资源{
宽度：20雷姆；
}

了解更多

另一个想法是使用伪元素而不是

html{
保证金：0；
身高：100%；
最小高度：100%；
}
身体{
保证金：0；
身高：100%；
最小高度：100%；
背景色：红色；
}
#容器{
宽度：50%；
身高：100%；
填充：5rem；
背景色：白色；
保证金：自动；
}
#扩展{
宽度：100%；
高度：100px；
背景：红色；
过渡：高度1s；
文本对齐：居中；
位置：相对位置；
}
#扩展：之前，
#扩展：之后{
内容：''；
宽度：5雷姆；
高度：1px；
背景：#000；
过渡：宽度1s；
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
}
#扩展：之前{
顶部：-10px；
}
#扩展：之后{
底部：-10px；
}
#展开：悬停{
高度：200px；
}
#展开：悬停：之前，
#展开：悬停：之后{
宽度：20雷姆；
}

了解更多

好吧，使用这个

#expand:hover~hr

可以选择

#expand:hover

的任何常规后续同级，在css中无法选择以前的同级。要使代码正常工作，请将两个

hr

下放到一个公共父项中，并应用

悬停hr

选择器。就你而言

代码笔：

替换：

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

致：

---

没有办法向后设置兄弟姐妹的样式

你可以简单地改变

#展开：悬停~hr{
宽度：20雷姆；
}

到

#容器：悬停hr{
宽度：20雷姆；
}

使用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>

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

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

了解更多

我试过这个，但没用。你能发送完整的代码吗？勾选此项抱歉，但此项没有预期的效果。当您将鼠标悬停在容器（白色）上时，hr会展开，但当鼠标悬停在展开（内部红色）中时，我需要它展开。嗯，好的，然后在它周围添加一个包装div。我已经用代码笔很好的方法更新了代码，但是我要求转换，你给出的答案没有转换效果，看看你是否可以相应地修改。这是一个转换效果。除#expand:hover~hr块外，您包括所有css。并将其替换为我添加的类。该类是宽度的变化，因为在css的hr块下有转换宽度，它将转换为您喜欢的方式。你需要完整的css代码吗？或者你知道我在说什么吗？我编辑了这篇文章来澄清一下，原来的转换效果每次都在应用。添加了更大的类，因为它是hr元素宽度的变化。我确保整个过程在一个代码笔中工作，并且它平稳过渡——而不仅仅是宽度的即时变化。

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

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