CSS div:悬停，过渡仅适用于一个元素

Question

出于某种原因，当我设置过渡时，当我的鼠标悬停在元素上时，背景会改变颜色，它仅适用于一个 elemtn，但它们都共享同一个类？ 任何帮助？ 任何帮助我的 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;
}

小提琴 http://jsfiddle.net/P26tf/

Answer 1

更

具体地定位<div>标签。请参阅 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

这是因为：

#outer_biz_pers
  {
    background:#E6E6E6;
  }

尝试这样做：

background: blue !important;

Answer 3

一些悬停被其他类覆盖，添加一个！important标签为我修复了你的小提琴

.outer_ad：悬停 { Z指数：1; 背景：蓝色！ }

Answer 4

您正在用其他 CSS 中设置的背景覆盖悬停中设置的背景：

        .outer_ad:hover
        {
            z-index:1;
            background: blue ;
        }
        #outer_price
        {
            top:-83px;
            background:#E6E6E6;
        }

在这里，您的背景蓝色将永远不会被使用，因为 #outer_price 的重要性范围高于您的 .outer_ad：hover

你可以做

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

或

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

强制悬停类比 # 类"更重要"。CSS表示级联样式表，级联是关键;)

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