Question

我有时间块，其大小以编程方式计算。

目标是：

- 如果内容大于其容器，当您将鼠标悬停在元素上时，它会展开以显示所有内容。

- 如果内容小于其容器，则不会发生任何事情。

这是fiddle。

注意：

-Red意味着它现在是如此。

- 绿色是我的目标。

我使用的是Angular，因此可以接受javascript解决方案。

小提琴HTML：

＆＃13;

.current {
  width: 200px;
  background-color: red;
  margin-right: 10px;
  float: left;
  overflow: hidden;
}
.current:hover {
  height: auto !important;
}
.supposed {
  width: 200px;
  background-color: lightgreen;
  margin-right: 10px;
  float: left;
  overflow: hidden;
}
.supposed.small:hover {
  height: auto !important;
}
.small {
  height: 50px;
}
.big {
  height: 100px;
}
.content {
  height: 75px;
  background-color: rgba(0,0,0,0.5);
}

＆＃13;

<body>
    <div class="current small">
       <div class=" content">

       </div>
    </div>
    <div class="current big">
        <div class="content">

        </div>
    </div>
    <div class="supposed small">
        <div class="content">

        </div>
    </div>
    <div class="supposed big">
        <div class="content">

        </div>
    </div>
</body>

＆＃13;

Answer 1

CSS：

.content {
    height: 100%;
}
.current:hover {
    height: auto !important;
}
.content:hover {
    min-height: inherit;
}

HTML with Angular：

<div class="current" ng-style="{height: calculateHeight()+'em',min-height: calculateHeight()+'em',}">
</div>

将内容高度设置为100％可确保将鼠标悬停在.current上等于将鼠标悬停在.content上。

如果.content应该大于.current，则设置“height：calculateHeight（）+'em'”可以使.current更大的效果。

“min-height：inherit”的设置确保.content至少与以前一样大。

@ tilti：感谢max-height的灵感。

Answer 2

只使用CSS，而不是在悬停div时将容器的高度设置为自动，您可以将溢出设置为可见。

这样＆＃34;隐藏＆＃34;当悬停时，将看到内部，而如果内部较小，容器将保持不变。

.current:hover {
  //height: auto !important;
  overflow:visible;
}

https://jsfiddle.net/kkw22eby/4/

Answer 3

如果您认为可以在父母身上使用max-height代替height并在.content孩子身上设置身高，则可以这样做。

.small .content {
  height: 75px;
}
.big .content {
  height: 500px;
}
.small,
.big {
  transition: max-height 0.4s; /* Animates the max-height */
}
.small {
  max-height: 100px;
}
.big {
  max-height: 150px;
}
.current:hover {
  max-height: 3000px !important; /* Will be animated to height:auto and then it stops */
}
.content {
  background-color: #369;
}

https://jsfiddle.net/c4jhvd8m/

CSS：Div根据原始大小调整大小

3 个答案: