0

私は名前付きの外側のdivと名前付きの 内側のdivTitleを持っていますstyle="width=100%"more

したがって、内側のdivにカーソルを合わせて外側のdivの高さを変更したい(スムーズに..トランジションを使用)

cssを使用することは可能ですか??

私は何かが欲しい

transition: height .4s;
-moz-transition: height .4s; 
-webkit-transition: height .4s; 
-o-transition: height .4s;  
-ms-transition: height .4s;

私のタイトルCSSコード

#title{
    display:inline-block;
    background-color:#000;
    position:absolute;
    top:20px;
    left:20px;
    right:20px;
    margin:0px;
    padding:0px;
    height:42px;
    min-width:800px;
}

私のより多くのCSSコード

#more{
    padding-left:10px;
    color:#999;
    text-decoration:underline;
    font-size:10px;
}

以下のコードはすべて機能していません

  • name:hover #title{height:200px}
  • name:hover + #title{height:200px}
  • name:hover ~ #title{height:200px}
  • name:hover > #title{height:200px}

JavaScriptでできますか???

4

1 に答える 1

1

CSS Selectors Level 4 Draftで導入されたSubject Identifierを使用せずに CSS の祖先要素をターゲットにすることはできません。これは現時点ではどのブラウザーでもサポートされていません。

将来、次のように書くことができます (感嘆符は一時的な解決策です)。

!#Title name:hover{
    /* css stuff */
}

ただし、次のいずれかを実行できます。

div で宣言display:tableし、この例のように#titlediv をアニメーション化します。少なくともクロムで動作します;)#more

または、javascript (またはおそらく jQuery) を使用し、イベントハンドラーを適用して、高さを#title直接変更するか、トランジション効果を保持するクラスを適用します。

于 2013-01-09T14:16:54.740 に答える