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

如果不使用Subject Identifier中引入的 CSS Selectors Level 4 Draft ，则无法在css中定位祖先元素，目前这些浏览器都不支持。

在更远的将来你可以写（感叹号是一个临时解决方案）：

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

但您可以执行以下操作之一：

在display:table div上声明#title，并在this example中为#more div设置动画。至少在chrome中工作;）

或者您只是使用javascript（或者jQuery），应用eventhandler并直接修改#title的高度或应用一个包含过渡效果的类。

我想通过将鼠标悬停在文本INSIDE上来改变div高度

1 个答案: