gpt4 book ai didi

javascript - CSS:根据原始大小调整 Div 的大小

转载 作者:行者123 更新时间:2023-11-29 17:54:56 24 4
gpt4 key购买 nike

我有时间 block ,其大小是通过编程方式计算的。

目标是:

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

-如果内容小于其容器,则什么也不会发生。

这是一个fiddle .

注意:

-红色表示它是当前的样子。

-绿色是我的目标。

我正在使用 Angular,因此可以接受 javascript 解决方案。

fiddle HTML:

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

最佳答案

CSS:

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

带有 Angular 的 HTML:

<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 总是至少和以前一样大。

@elveti:感谢 max-height 的启发。

关于javascript - CSS:根据原始大小调整 Div 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40172506/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com