是否：专注于具体工作：hover呢？

Question

这是我的问题。我希望拥有图标的input-group-addon（搜索图标，日历图标等）通过特异性继承其输入字段的悬停，焦点和活动状态。我让它在悬停工作，但由于某种原因，特异性忽略了焦点状态。我认为这是我的代码中一个冲突的css指令，但我在CODEPEN中隔离了问题，它也在那里做了。

总之，我希望输入组插件边框在我对其进行聚焦时（选项卡或单击）与其输入字段无缝地变为黄色，就像我将鼠标悬停在其上时一样。

我的HTML ：

<div class="input-group controls">
    <input type="text" class="form-control" placeholder="Search by Name" />
    <span class="input-group-addon right search"></span>
</div>

我的CSS （如果可能的话，请使用Chrome。我没有在这里包含corssbrowser的东西以使其更易于阅读）此外，这最初建立在SCSS上：

.mar40 {
    margin: 40px auto;
}

.form-control {
    border-width: 2px;
    border-color: #8f8f8f;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #bbbbbb;
    -webkit-border-radius: 34px;
    -moz-border-radius: 34px;
    -ms-border-radius: 34px;
    border-radius: 34px;
    background: #211E1E;
}

.form-control:focus,
.form-control:hover {
    border-color: rgba(248, 151, 29, 0.77);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    transition: all 1s ease;
}

.form-control .input-group-addon {
    background: #8f8f8f;
    border-color: #555555;
    border-width: 2px;
}

.controls .input-group-addon.right.search {
    background: #30373e;
    border: 2px solid #8f8f8f;
    color: #bbbbbb;
    border-left: none;
    border-radius: 0px 20px 20px 0;
    padding: 4px 10px;
    min-width: 0;
}

.controls .input-group-addon.right.search:before {
    content: "\f4a4";
    font-family: 'Ionicons';
    font-size: 16px;
}

.controls:focus .input-group-addon.right,
.controls:hover .input-group-addon.right,
.controls:active .input-group-addon.right {
    border: 2px solid rgba(248, 151, 29, 0.77) !important;
    border-left: none !important;
    transition: all 1s ease;
}

.controls:focus .input-group-addon.right:before,
.controls:hover .input-group-addon.right:before,
.controls:active .input-group-addon.right:before {
    color: rgba(248, 151, 29, 0.77);
    transition: all 1s ease;
}

悬停/焦点/活动时所需的效果图

这就是我关注的焦点

方便的花花公子CODEPEN

谢谢！

Answer 1

:focus适用于input而非父容器，因此您的选择器组应如下所示。 （注意第一行中更改的选择器）

.form-control:focus + .input-group-addon.right,
.controls:hover .input-group-addon.right,
.controls:active .input-group-addon.right {
  border: 2px solid rgba(248, 151, 29, 0.77) !important;
  border-left: none !important;
  transition: all 1s ease;
}

据我所知，当您:hover孩子时，您也间接地在父母身上盘旋，因此当.controls:hover .input-group-addon.right适用时，.form-control:hover也会有效。因此，.form-control和.input-group-addon.right都获得了边界。

但是当您专注于.form-control时，焦点选择器仅适用于input，并且不会应用于其容器。因此，只有.form-control获得边框而不是.input-group-addon。因此，必须根据.input-group-addon更改选择器以设置input的样式，而不是容器的焦点。

CodePen Demo