我似乎不能让我的过渡适应我的元素.将框设置为在悬停状态之间设置更大和/或更小的高度动画.我做错了什么?

body{
  background-color: #000;
}

.martin-testimonials {
  background-color: #fff;
  border-radius: 6px 6px 6px 6px;
  width:13%;
  padding: 40px;
  font-family: Open Sans,Arial,sans-serif;
  font-size: 15px;
  line-height: 27px;
}

.martin-testimonials .et_pb_testimonial_content {
    max-height: 108px;
    overflow: hidden;
    margin-bottom: 10px;
    -webkit-transition: height 0.9s;
    -moz-transition: height 0.9s;
    transition: height 0.9s;
}

.martin-testimonials:hover .et_pb_testimonial_content {
    max-height: none;
}
<div class="et_pb_module et_pb_testimonial et_pb_testimonial_0 martin-testimonials clearfix et_pb_text_align_left et_pb_bg_layout_light et_pb_icon_off et_pb_testimonial_no_image et_had_animation" style="">
                
                
                
                <div class="et_pb_testimonial_description" style="margin-left: 0px;">
                    <div class="et_pb_testimonial_description_inner"><div class="et_pb_testimonial_content">"Nunc consequat justo eget enim finibus porta. Suspendisse orci nunc, rutrum quis nunc sed, feugiat hendrerit massa. In cursus ornare sollicitudin. Nunc consequat justo eget enim finibus porta. Suspendisse orci nunc, rutrum quis nunc sed, feugiat hendrerit massa. In cursus ornare sollicitudin."</div></div>
                    <span class="et_pb_testimonial_author">Antonio Compbell</span>
                    <p class="et_pb_testimonial_meta"><span class="et_pb_testimonial_position">Student</span><span class="et_pb_testimonial_separator">,</span> <span class="et_pb_testimonial_company">Yoga Studio</span></p>
                </div>
            </div>

推荐答案

有两件事需要解决:

  1. 你的过渡是在max-height号,而不是height号.
  2. 悬停max-height应该是一个数字,而不是none.

请参阅下面的修复代码片段.唯一的变化是上述两项.

body {
  background-color: #000;
}

.martin-testimonials {
  background-color: #fff;
  border-radius: 6px 6px 6px 6px;
  width: 13%;
  padding: 40px;
  font-family: Open Sans, Arial, sans-serif;
  font-size: 15px;
  line-height: 27px;
}

.martin-testimonials .et_pb_testimonial_content {
  max-height: 108px;
  overflow: hidden;
  margin-bottom: 10px;
  -webkit-transition: max-height 0.9s;
  -moz-transition: max-height 0.9s;
  transition: max-height 0.9s;
}

.martin-testimonials:hover .et_pb_testimonial_content {
  max-height: 300px;
}
<div class="et_pb_module et_pb_testimonial et_pb_testimonial_0 martin-testimonials clearfix et_pb_text_align_left et_pb_bg_layout_light et_pb_icon_off et_pb_testimonial_no_image et_had_animation" style="">



  <div class="et_pb_testimonial_description" style="margin-left: 0px;">
    <div class="et_pb_testimonial_description_inner">
      <div class="et_pb_testimonial_content">"Nunc consequat justo eget enim finibus porta. Suspendisse orci nunc, rutrum quis nunc sed, feugiat hendrerit massa. In cursus ornare sollicitudin. Nunc consequat justo eget enim finibus porta. Suspendisse orci nunc, rutrum quis nunc sed, feugiat
        hendrerit massa. In cursus ornare sollicitudin."</div>
    </div>
    <span class="et_pb_testimonial_author">Antonio Compbell</span>
    <p class="et_pb_testimonial_meta"><span class="et_pb_testimonial_position">Student</span><span class="et_pb_testimonial_separator">,</span> <span class="et_pb_testimonial_company">Yoga Studio</span></p>
  </div>
</div>

Html相关问答推荐

在CSS中不保持圆形图像形状的边框半径属性

如何将FlexBox项目zoom 到其包含图像的大小

如何在css中将包含多行文本的多个p-tag放在一起(并排)?

防止SVG边框半径zoom

这<;td&>如何溢出<;表>;?

将表格背景图像置于行背景 colored颜色 之上

当光标悬停在(相同)父元素上方时,为多个子元素创建不同的过渡动画

未在抖动中播放的HTML音频||文本正在工作其他标记正在播放,但音频未播放

更改Angular 为17的material Select 字段的高度?

在弹性框布局中的第n个元素后强制换行

获取标准的Python脚本,以便使用FASK对网站进行Flask

Swift WKUserContentController 和 WKScriptMessageHandler 设置不正确

如何在悬停时使矩形按钮上的边框变圆

如何居中此按钮,即使它已经在计算机分辨率中居中

并排放置两个 div,同时 div2 环绕 div1

Tailwind:父母动态适应子元素的身高

如何截断一些文本并用双引号引起来?

Bootstrap 5 英雄

Svelte 将 svg 作为组件导入工作很奇怪