我想通過懸停在文本的DIV來改變DIV高度

我有一個名爲Title一個外層div具有style="width=100%" 和內部DIV命名more我想通過懸停在文本的DIV來改變DIV高度

所以，我想通過懸停在改變外層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 ???

來源

2013-01-09 Tanmay Gawankar

供將來參考：[JSFiddle]（http://www.jsfiddle.net） – George

我修改了我的答案，提供了一些關於如何解決問題的提示。如果你想要更多的信息只是問;） – Christoph

你不能沒有利用在CSS Selectors Level 4 Draft推出Subject Identifier是由無此刻的瀏覽器支持的目標在CSS中的祖先元素。

在更遠的將來，你可以寫（感嘆號是治標不治本）：

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

但是，您可以做以下的事情之一：

您#title DIV聲明display:table和動畫#more div like this example。至少在Chrome中工作;）

或者你只是使用JavaScript（或者jQuery），應用一個事件處理程序並直接修改#title的高度或應用一個持有過渡效果的類。

來源

2013-01-09 14:16:54 Christoph

好吧，所以'更多'擴大，所以'標題'被推動:) –

是的，但是這可能無法在所有瀏覽器中順利運行。 JavaScript解決方案在這裏可能更可取。然而，這取決於你想要什麼或需要什麼。這是否解決了你的問題？ – Christoph

我想通過懸停在文本的DIV來改變DIV高度

回答

相關問題