【问题标题】:CSS hover transition for another element另一个元素的 CSS 悬停过渡
【发布时间】:2013-10-12 17:14:25
【问题描述】:

这就是我所做的,现在我需要为过渡设置动画,所以它几乎从 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 标签不是最好的,但我被认为是我唯一的选择。

【问题讨论】:

  • 你用的是什么浏览器?
  • chrome,我也有其他浏览器的过渡标签
  • 对,只是想确认一下。

标签: html css hover transition


【解决方案1】:

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 属性的所有浏览器前缀,然后才是实际属性。

【讨论】:

    【解决方案2】:

    如果你把类放到正确的元素上,转换就会起作用。

    改变这个:

    <b> title </b>
    

    到这里:

    <b class="title"> title </b>
    

    【讨论】:

      猜你喜欢
      • 2018-07-30
      • 1970-01-01
      • 2012-06-19
      • 1970-01-01
      • 1970-01-01
      • 2013-07-12
      • 2019-06-26
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多