我想通過將文本懸停在div內的文本上來更改div的高度

Question

我有一個名為Title的外部div，其style="width=100%" ，內部div的命名為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做到嗎？？？

Answer 1

如果不使用CSS選擇器第4級草稿中引入的主題標識符 ，則無法在css中定位祖先元素，目前尚無瀏覽器支持該主題標識符 。

在更遠的將來，您可以寫（感嘆號是一個臨時解決方案）：

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

但是，您可以執行以下操作之一：

在本例 display:table ，在#title div上聲明display:table並為#more div設置動畫。 至少在Chrome中有效；）

或者，您只使用javascript（或者可能是jQuery），應用事件處理程序並直接修改#title的高度或應用具有過渡效果的類。