CODEWITHSUNDEEP
htmlcsshovertransition
user2055171
user2055171

Reputation: 59

CSS hover transition for another element

So this is what I have done, now i need to animate the transition so it pretty much starts at 100x100 and end at 900x300 (widthxheight)

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

When I hover over b it shows me the ordered list. All good so far. But I cant seem to get the animation work as I have for all the other elements 

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; 
}

How do i fix this? what am i doing wrong?

***I know Using the B tag is not the best, but i was given with this as my only choice.

Upvotes: 0

Views: 1903

Answers (2)

Tyler Crady
Tyler Crady

Reputation: 36

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;
     }

It's good practice to list all the browser prefixes for css3 properties first, and then the actual property.

Upvotes: 1

zrkb
zrkb

Reputation: 116

The transition works if you put the class to the right element.

Change this:

<b> title </b>

To this:

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

Upvotes: 1

Related Questions