我想通过将文本悬停在div内的文本上来更改div的高度

Question

I have a outer div named Title which has style="width=100%" and inner div named more

So I want to change height of outer div by hovering on inner div(smoothly.. using transition)

Is it possible using css??

I want something like

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

my title css code

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

My more css code

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

All the below code are not working

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

can i do it through JavaScript???

Answer 1

You cannot target an ancestor element in css without using the Subject Identifier which is introduced in CSS Selectors Level 4 Draft which is supported by none of the browsers at the moment.

In farther future you can write (the exclamation mark is a temporary solution):

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

You can however do one of the following things:

Declare display:table on your #title div and animate the #more div like in this example . Works at least in chrome;)

Or you just use javascript (or perhaps jQuery), apply an eventhandler and either modify the height of #title directly or apply a class holding the transition effect.