css div:hover with transition only applying to one element?

Question

For some reason when I set a transition so that when my mouse hovers over an element the background changes color it only works with one elemtn, but yet they all share the same class? any help my css

.outer_ad
{
    position:relative;
    background:#E6E6E6;;
    display:inline-block;
    border: 1px solid black;
    z-index:0;
    transition: background 1s;
    -webkit-transition: background 1s; /* Safari */
}

.outer_ad:hover
{
    z-index:1;
    background: blue;
}

a fiddle http://jsfiddle.net/P26tf/

Answer 1

Target the <div> tags more specifically. See http://jsfiddle.net/P26tf/1/ :

#main .outer_ad
{
    position:relative;
    background:#E6E6E6;;
    display:inline-block;
    border: 1px solid black;
    z-index:0;
    transition: background 1s;
    -webkit-transition: background 1s; /* Safari */
}

#main .outer_ad:hover
{
    z-index:1;
    background: blue;
}

Answer 2

It is because of:

#outer_biz_pers
  {
    background:#E6E6E6;
  }

try and do this instead:

background: blue !important;

Answer 3

Some of the hovers are being overridden by the other classes, adding an !important tag fixed it on your fiddle for me

.outer_ad:hover { z-index:1; background: blue !important; }

Answer 4

Youre are overridding the background set in hover with the ones setted in your differents other CSS :

        .outer_ad:hover
        {
            z-index:1;
            background: blue ;
        }

        #outer_price
        {
            top:-83px;
            background:#E6E6E6;
        }

Here your background blue will never be used because #outer_price have a higher importance range than your .outer_ad:hover

You can do

        body div#main div.outer_ad:hover
        {
            z-index:1;
            background: blue ;
        }

or

        .outer_ad:hover
        {
            z-index:1;
            background: blue !important ;
        }

To force your hover class to be "more important" than the # ones. CSS means Cascade style sheet, Cascade is the key ;)

http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css