0

是否可以在没有js的纯CSS3中获取属性值（在我的div子元素的情况下）并将其用作父属性的值？

我的情况：我有一个 div，它使用以下代码在鼠标悬停时显示动画：

.filter {
    height: 22px;
    overflow: hidden;
    transition: all 1s ease-in-out 0s;
}

.filter:hover {
    height: 100px;
}

但我希望“目标”（悬停时）高度不是硬编码的，而是取自该 div 的子项（表）的 scrollHeight 属性，使用 cacl() 函数增加了一个固定量。我需要这个，因为这个表格的大小在不同的页面上是不同的，并且表格本身有一个 box-shadow 属性，但我想为此使用单一样式。

如果我使用

.filter:hover {
    height: auto;
}

我没有动画，内表的阴影保持隐藏。

这是jsFiddle 示例。

可以使用纯 CSS3 完成吗？

4

2 回答 2

0

我知道在 css 中使用 html 标记中的属性的唯一方法是使用content属性。

从这篇文章：

该content属性可以采用字符串、url() attr()、、counter() 和 counters() 值。url() 值用于插入图像。attr() 函数以字符串形式返回关联元素的指定属性的值。counter() 和 counters() 函数可用于显示任何 CSS 计数器的值。

<a href="http://wikipedia.org">Wikipedia</a>

 a:after {content: " (" attr(href) ")";}

…将在链接内容之后显示 href 属性的值，从而为上面的示例生成以下锚文本：Wikipedia ( http://wikipedia.org )。

话虽如此，我认为这对您尝试做的事情没有帮助。

于 2013-08-08T09:41:24.010 回答
0

如果您想纯粹使用 CSS3 来实现，请转换max-height属性而不是height属性。

最初设置heighttoauto和max-heightto ，然后将其转换为比您期望的最大表更高的值，例如.22pxmax-height1000px

.filter {
    max-height: 12px;
    height: auto;
    overflow: hidden;
    transition: all 2s ease-in-out 0s;
    padding-bottom: 10px;
}

.filter:hover {
    max-height: 1000px;
}

更新小提琴：http: //jsfiddle.net/AlexanderSh/bJdMm/2/

于 2013-08-08T09:45:16.067 回答