Question

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

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

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

.filter:hover {
    height: 100px;
}

但我想要＆＃34;目的地＆＃34; （on-hover）高度不是硬编码的，而是取自div的子（一个表）的scrollHeight属性，使用cacl（）函数增加固定量。我需要这个，因为这个表的大小在不同的页面上是不同的，并且表本身有一个box-shadow属性，但我想使用单一样式。

如果我使用

.filter:hover {
    height: auto;
}

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

这是jsFiddle example。

可以使用纯CSS3吗？

Answer 1

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

来自this article：

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

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

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

...会在链接内容后显示href属性的值，导致上面示例的以下锚文本：维基百科（http://wikipedia.org）。

话虽如此，我认为这不会对你想要做的事情有所帮助。

Answer 2

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

最初将height设置为auto，将max-height设置为22px，然后将max-height转换为您希望最大的表格更高的值，比如1000px。

.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/

获取子元素属性的值并在纯CSS3中使用它？

2 个答案: