Почему это прохождение не подходит для меня?

Question

вот вещь, я использую SCSS, я пытаюсь играть с окном поиска, есть значок, который я хочу изменить его цвет, как только вы зависать и фокус,

here you can see an example, что я приготовил для вас, ребята с моим кодом

<div class="form-group"> 
    <input id="search-box" class="search-box"> 
    <label for="search-box"> 
     <span class="glyphicon glyphicon-search search-icon"></span> 
    </label> 
</div> 

и здесь СКСОМ

$tl: .6s; 

.search-box { 
    background: lighten(get-color(plata), 10%); 
    border: 0; 
    border-radius: get-space(xxx-small) + 1; 
    cursor: pointer; 
    font-weight: $weight-light; 
    height: get-space(x-medium); 
    padding-left: get-space(small); 
    transition: width $tl, border-radius $tl, background $tl, box-shadow $tl; 
    width: 140px; 

    label { 
     color: darken(get-color(rose), 15%); 
    } 

    &:hover { 
     border: 0; 
     box-shadow: 0 0 .2px 1px get-color(plata); 
     outline: none; 
     transition: width $tl cubic-bezier(0, 1.22, .66, 1.39), border-radius $tl, background $tl; 
     width: 200px; 

     label .search-icon { 
      color: darken(get-color(plata), 35%); 
     } 
    } 

    &:focus { 
     box-shadow: 0 0 0 1.4px get-color(cobalt-blue); 
     color: get-color(night); 
     cursor: text; 
     outline: none; 
     width: 200px; 

     label .search-icon { 
      color: get-color(cobalt-blue); 
     } 
    } 
} 

.search-icon { 
    cursor: pointer; 
    left: -30px; 
    position: relative; 
} 

Я не имею представления о том, почему моих перемещения не работают, я пытаюсь получить label .search-icon капитана в hover/focus эв и изменить цвет значка, но он не делает это правильно, любое предложение?

Answer 1

на основе вашей структуры в HTML код:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 

<div class="panel-heading first-panel-heading"> 
    <input id="sports-search-bar" type="search" ng-model="query" class="search-box" placeholder="Search sports..."> 
    <label for="sports-search-bar"> 
     <span class="glyphicon glyphicon-search search-icon"></span> 
    </label> 
</div> 

вы должны использовать следующий код для укладки:

$tl: .6s; 

.panel-heading 
{ 
    .search-box { 
     background: #ccc; 
     border: 0; 
     border-radius: get-space(xxx-small) + 1; 
     cursor: pointer; 
     font-weight: bold; 
     height: get-space(x-medium); 
     padding-left: get-space(small); 
     transition: width $tl, border-radius $tl, background $tl, box-shadow $tl; 
     width: 140px; 

     &:hover { 
      border: 0; 
      box-shadow: 0 0 .2px 1px get-color(plata); 
      outline: none; 
      transition: width $tl cubic-bezier(0, 1.22, .66, 1.39), border-radius $tl, background $tl; 
      width: 200px; 
     } 

     &:focus { 
      box-shadow: 0 0 0 1.4px get-color(cobalt-blue); 
      color: get-color(night); 
      cursor: text; 
      outline: none; 
      width: 200px; 
     } 
    } 

    label .search-icon { 
     color: green; 
    } 

    label .search-icon { 
     color: get-color(cobalt-blue); 
    } 

    &:hover 
    { 
     label .search-icon { 
      color: blue; 
     } 
    } 
} 

.search-icon { 
    cursor: pointer; 
    left: -30px; 
    position: relative; 
}