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

有些徘徊被其他类重写，添加了一个！重要的标签，将它固定在你的小提琴上

.outer_ad：悬停 { 的z-index：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意味着Cascade样式表，Cascade是关键;）

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

css div：悬停与转换只适用于一个元素？

4 个答案: