html - catch :hover event on :after selector

Question

目标:

仅使用 css3 创建一个带有删除图标的简单文本框元素。该图标应在悬停 时将其颜色更改为蓝色。

进度:

用一点 html 和 css 代码很容易实现我的愿望。

.ui-textbox {  
    padding: 0 10px 0 0;             
    position: relative;
}
.ui-textbox span {
    margin: 0 10px;
}
.ui-textbox:hover:after {
    content:"x";
    position: absolute;
    top: 0;    
    font-size: 16px;
    right: 20px;
}

<label class="ui-textbox">
    <span>Some label</span>
    <input type="text" />
</label>

我的问题:

无法找到如何在 after 元素上捕捉悬停事件，以便我可以更改他的颜色。

类似于:

.ui-textbox:hover:after:hover {
    color: blue;
}

Answer 1

您不能“捕捉”:hover 在 ::after 伪元素上。我建议使用额外的元素(如 span)进行以下操作:

.ui-textbox {
  padding: 0 10px 0 0;
  position: relative;
}
.ui-textbox span {
  margin: 0 10px;
}
.ui-textbox:hover span.cross {
  position: absolute;
  top: 0;
  font-size: 16px;
  right: 20px;
  visibility: visible;
}
.ui-textbox span.cross {
  visibility: hidden;
}
.ui-textbox:hover span.cross:hover {
  color: red;
}

<label class="ui-textbox">
  <span>Some label</span>
  <input type="text" />
  <span class="cross">x</span>
</label>