Question

这是事情，我正在使用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>

这里是scss

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

为什么这次穿越失败了？

1 个答案: