0

我有一个名为的外部 div Title，其中有一个名为的style="width=100%" 内部 divmore

所以我想通过悬停在内部 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 */
}

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

display:table在您的div 上声明并像此示例#title中那样为 div 设置动画。至少在铬中工作；）#more

或者你只是使用 javascript（或者可能是 jQuery），应用一个事件处理程序并直接修改高度#title或应用一个持有过渡效果的类。

于 2013-01-09T14:16:54.740 回答