Шрифт Удивительный наведение значков сложенных штанов не работает должным образом

Question

У меня возникла проблема с эффектом зависания моих значков.

Вот мой HTML:

<div class="container"> 
     <div class="row"> 
      <div class="col-md-6 text-center"> 
       <a href="#"> 
        <span class="fa-stack fa-5x"> 
         <i class="fa fa-circle fa-stack-2x"></i> 
         <i class="fa fa-wrench fa-stack-1x fa-inverse"></i> 
        </span> 
       </a> 
      </div> 
      <div class="col-md-6 text-center"> 
       <a href="#"> 
        <span class="fa-stack fa-5x"> 
         <i class="fa fa-circle fa-stack-2x"></i> 
         <i class="fa fa-lightbulb-o fa-stack-1x fa-inverse"></i> 
        </span> 
       </a> 
      </div> 
     </div> 
    </div> 

Вот мой стиль:

.fa-circle { 
    color: red; 
} 
.fa-circle:hover { 
    color: blue; 
} 

парение работает, пока не наведет внутреннюю иконку (fa-stack-1x). Как только я нахожу fa-stack-1x, fa-stack-2x теряет стиль наведения.

Как я могу предотвратить, чтобы потерять стиль зависания только с CSS?

Answer 1

Вам нужно захватить событие при наведении на пролете контейнер «.fa-стек», как, что:

.fa-circle { 
      color: red; 
     } 
.fa-stack:hover .fa-circle { 
      color: blue; 
     } 

здесь является рабочей скрипкой: https://jsfiddle.net/fou3om77/

Answer 2

Вам нужно будет предназначаться родительский элемент для селектора :hover, так как не существует никакого способа таргетинга предыдущих элементов:

.fa-stack .fa-circle { 
    color: red; 
} 
.fa-stack:hover .fa-circle { 
    color: blue; 
} 

Answer 3

Это потому, что ваш парения определяется только на .fa-circle элемент, а не одно из .fa-stack-1x элементов. Если вы хотите настроить таргетинг на все иконки вам нужно поместить эффект парения на fa-stack родителя:

.fa-stack .fa { 
    color: red; /* All icons within the fa-stack are red by default. */ 
} 

.fa-stack:hover .fa { 
    color: blue; /* All icons within the fa-stack are blue when hovered over. */ 
}