html - 之前使用伪类对 css 标签进行分组(悬停)

Question

我正在研究分组 CSS 选择器(悬停)。我有两个文本框，第一个是用户名，第二个是密码。

当我将这些文本字段悬停时，图标背景会使用转换改变颜色。

这是HTML代码

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 login-panel-padng">
    <span class="icon-user">
       <input type="text" class="txt-padding  login-panel-usr-name"     placeholder="Username" />
    </span>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 login-panel-padng">
 <span class="icon-password">
  <input class="txt-padding login-panel-usr-name" id="txt_pwd" type="password" placeholder="Password"/>
  </span>
</div>

这是代码。

.icon-user::before {
    font-family: FontAwesome;
    content:"\f007";
    font-size: 18px;
    position: absolute;
    border-right: 1px solid lightBlue;
    border-top-left-radius: 10px;
    height: 40px;
    padding: 10px 15px 15px 15px;
    -webkit-transition : background 500ms ease-out;
    -moz-transition : background 500ms ease-out;
    -o-transition : background 500ms ease-out;
}
.icon-password::before {
    font-family: FontAwesome;
    content:"\f084";
    font-size: 18px;
    position: absolute;
    border-right: 1px solid lightBlue;
    border-top-left-radius: 10px;
    height: 40px;
    padding: 10px 15px 15px 15px;
    -webkit-transition : background 500ms ease-out;
    -moz-transition : background 500ms ease-out;
    -o-transition : background 500ms ease-out;
}
.icon-user .icon-password:hover:after {
    background-color: lightBlue;
    border-top-left-radius: 10px;
    border: 1px solid #336699;
}

对于悬停，我想同时使用 icon-user 和 icon-password 类标签。所以我可以减少代码行数。

这是 jsfiddle Link

请帮我解答这个问题。

干杯 马哈德万

Answer 1

感谢您的回复。我得到了上述问题的解决方案。

.icon-user:hover::before, .icon-password:hover::before{
   background-color: lightBlue;
   border-top-left-radius: 10px;
   border: 1px solid #336699;
 }

你必须像上面的例子一样调用所有的类。然后Hover效果就来了。

干杯， 马哈德万