2014-02-07 3 views
0

По какой-то причине, когда я устанавливаю переход так, что, когда моя мышь нависает над элементом, фон меняет цвет, он работает только с одним элементом, но все же они имеют один и тот же класс? любая помощь мой CSScss div: наведение с переходом только на один элемент?

.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/

ответ

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

упс моя ошибка, которую я не понял ни на секунду, спасибо! –

1

Это потому, что:

#outer_biz_pers 
    { 
    background:#E6E6E6; 
    } 

попробовать и сделать это вместо того, чтобы:

background: blue !important; 
1

Некоторые парит переопределяются другими классами, добавляя! важный тег исправил это на вашей скрипке для меня

.outer_ad: hover { z-index: 1; фон: синий! Important; }

+0

Micallef избил меня к нему ха-ха – Zach

1

Youre является overridding фона набора в парении с теми, выставиться в вашем дифференте других CSS:

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

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

Здесь ваш синий фон никогда не будет использоваться, поскольку #outer_price имеет более высокий диапазон важности, чем ваши. outer_ad: парить

Вы можете сделать

 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

Смежные вопросы