CSS: класс hover влияет на внутренние divs

Question

.header-news-item { 
    height:35px; 
    width:250px; 
    font-size:11px; 
    border: 2px solid #ddeeee; 
    float:left; 
    margin:0px 10px; 
    padding:7px; 
    padding-top: 5px; 
    border-radius: 7px; 
    line-height:1.3; 
    background-color:#f9f9f9; 

} 

.header-news-item :hover { 
    border: 2px solid #aadddd; 
    background-color:#f9f9f9; 

} 

У меня есть элемент div с рамкой. Я хочу изменить цвет этой границы на событие hover. Поэтому у меня есть: hover псевдокласс, определенный в CSS. Проблема в том, что граница этого div не изменяется, а вместо этого меняются границы внутренних div. Почему это? Как я могу это исправить?

<div class="header-news-item"> 

    <div> title  </div> <- 
    <div> subtitle  </div> <- borders of these inner divs are changed 
    <div> read more... </div> <- 

</div> 

Answer 1

У вас есть descendant combinator () между селектором .header-news-item класса и селектор :hover псевдо-класса. Убери это.

Answer 2

Удалите пространство между .header-пресс-пункта, а также: парить в вашей декларации CSS так, что он читает .header-пресс-пункт: парить вместо .header-новости-пункт: парить.