html - 另一个元素的 CSS 悬停过渡

标签 html css hover transition

这就是我所做的,现在我需要制作过渡动画,所以它几乎从 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/

相关文章:

Javascript向当前代码添加功能

javascript - 每次触发事件时,如何通过循环 1 对 1 来删除 classList 值?

html - CSS - 文本溢出在 IE10 中不起作用

javascript - Jquery 插件在我按下按钮后工作

javascript - 如何用水平滚动修复表头?

javascript - iPad 上的悬停 js 功能不会切换

html - 悬停时变暗的叠加层比图像大

html - 简单的 CSS 转换 - 没有任何效果

css - 在列中定位 div?

javascript - div 不会随窗口大小缩放,jquery 会阻止它吗?