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

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

这是jsfiddle Link

请帮我解决这个问题。

干杯马哈德

Answer 1

如果你想对它们进行分组，为什么不在两者上使用相同的类，

...
    <span class="inputIcon icon-user">
        ...
    </span>
...
    <span class="inputIcon icon-password">
        ...
    </span>
...

然后，

.inputIcon:hover::before { ... }

Answer 2

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

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

您必须像上面的示例一样调用所有类。然后就会出现悬停效应。

干杯，马哈德

之前使用伪类对css标记进行分组（悬停）

2 个答案: