Css 为什么这种穿越对我来说是失败的？

问题是，我正在使用scss，我正在尝试玩一个搜索框，有一个图标，我想在你悬停和聚焦后改变他的颜色

我用我的代码为你们准备的

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

---

我不知道为什么我的遍历不起作用，我正在尝试获取

标签。搜索图标

以捕获

悬停/聚焦

事件，并更改图标的颜色，但它没有正确执行，有什么建议吗？

基于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>

---

这就是你要找的吗？

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