CSS парения переход к другому элементу

Question

Так это то, что я сделал, теперь мне нужно анимировать переход, так это в значительной степени начинается в 100х100 и заканчиваются в 900x300 (WIDTHxHEIGHT)

<b> title </b> 
<ol> 
    <li> list </li> 
</ol> 

Когда я парить над б он показывает мне упорядоченный список. Все хорошо до сих пор. Но я не могу заставить анимацию работать, как и у всех остальных элементов.

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 не самое лучшее, но я получил это как мой единственный выбор.

Answer 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, а затем фактическое свойство.

Answer 2

Переход выполняется, если вы поместите класс в правый элемент.

Изменить это:

<b> title </b> 

Для этого:

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