0

プロパティの値(私の場合はdivの子要素)を取得し、それをjsなしの純粋なCSS3で親のプロパティの値として使用することは可能ですか?

私の場合: 次のコードを使用して、マウス ホバー時にアニメーションで表示される 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 属性の値を表示し、上記の例の次のアンカー テキストになります: ウィキペディア ( http://wikipedia.org )。

そうは言っても、これがあなたがやろうとしていることに役立つとは思いません。

于 2013-08-08T09:41:24.010 に答える
0

純粋に CSS3 を使用して行いたい場合は、max-heightプロパティの代わりにプロパティを移行しheightます。

とを最初に設定し、heightをのように、最大​​のテーブルであると予想されるものよりも高いものに移行します。automax-height22pxmax-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 に答える