Question

我在这里发生了一件奇怪的事。我在另一个div里面有一个div。我希望主div保持原位，当鼠标悬停在它上面时，主div内的嵌套div动画到其中的某个高度以显示一些文本。相反的是，由于某种原因，我的主要部分在其位置上下降。快速.GIF显示问题：https://imgur.com/jM2wUfE

<div id={`SlideBarBox-${this.props.title}`} className="SlideBarBox">
      <div className="SlideBarBox-Info" id={`info-${this.props.title}`}>
            <h4 id={`text-${this.props.title}`}>{this.props.title}</h4>
      </div>
</div>
.SlideBarBox {
    width: 25%;
    height: 34%;
    border: 1px solid black;
    display: inline-flex;
    align-items: flex-end;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 3%;
}

.SlideBarBox-Info{
    height: 0px;
    width: 100%;
    border: 1px solid black;
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
    overflow: hidden;  
}

我的动画：

document.getElementById(`SlideBarBox-${this.props.title}`).addEventListener("mouseout", (event) => {
    document.getElementById(`info-${this.props.title}`).style.height = "0px";
})
document.getElementById(`SlideBarBox-${this.props.title}`).addEventListener("mouseover", (event) =>{
    document.getElementById(`info-${this.props.title}`).style.height = "20px";
})

任何帮助都将不胜感激。

Answer 1

我认为你正试图在这个问题上进行。您可以使用简单的HTML和CSS实现此功能，现在需要JS。此外，我不熟悉您尝试使用ID中的斜线括号来实现HTML，但我确定className不是您识别班级的方式在HTML中。您只想使用class=。

我在这里汇总了一个如何使用HTML和CSS执行此操作的示例。在您的CSS中，您希望为父div提供属性position: relative;，并为子div提供属性position: absolute;。绝对定位将使子div不影响父div的高度。 left和bottom属性会在父div中找到您想要的子div。

从那里，您希望父div上的:hover影响子div的max-height。使用max-height是因为出于某种原因，height不受CSS转换的影响。因此div不会逐渐增长，但只要你盘旋就会跳到最高点。

一般情况下，您希望在尝试使用CSS之前寻找使用CSS实现目标的方法，因为CSS的重量更轻，浏览器处理速度更快。

＆＃13;

h4 {
  margin: 0px;
  padding: 5px 10px;
}

.SlideBarBox {
    width: 25%;
    height: 200px;
    border: 1px solid black;
    position: relative;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 3%;
}

.SlideBarBox-Info {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: auto;
    max-height: 0px;
    width: 100%;
    border-top: 1px solid black;
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
    overflow: hidden;  
}

.SlideBarBox:hover .SlideBarBox-Info {
  max-height: 1000px;
}

＆＃13;

<div id="" class="SlideBarBox">
      <div class="SlideBarBox-Info" id="">
            <h4 id="">iFavMovie</h4>
      </div>
</div>

＆＃13;

尝试动画div来增长内部以在另一个div中显示其内容

1 个答案: