这就是我所做的,现在我需要制作过渡动画,所以它几乎从 100x100 开始到 900x300(宽度 x 高度)结束
<b> title </b>
<ol>
<li> list </li>
</ol>
当我将鼠标悬停在 b 上时,它会显示有序列表。到目前为止一切都很好。但是我似乎无法像所有其他元素那样获得动画效果
ol
{ width: 100px; height: 100px;
transition: all 3s;
-webkit-transition: all 3s;
}
b.title
{
background-color: #000000;
}
b.title:hover + ol
{
width: 925px;
height: 160px;
display: block;
}
我该如何解决这个问题?我做错了什么?
***我知道使用 B 标签不是最好的,但这是我唯一的选择。
最佳答案
HTML
<b class="title">title</b>
<ol>
<li>List</li>
</ol>
CSS
ol{
width:100px;
height:100px;
-webkit-transition: all 3s linear;
-moz-transition: all 3s linear;
-o-transition: all 3s linear;
transition: all 3s linear;
}
.title:hover{
display:block;
width:925px;
height:160px;
}
最好先列出 css3 属性的所有浏览器前缀,然后再列出实际属性。
关于html - 另一个元素的 CSS 悬停过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19336974/