Html 捕捉：悬停事件在：选择器之后 目标：

仅使用

css3

创建带有移除图标的简单文本框元素。 图标应在

悬停

时将其颜色更改为

蓝色

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

.ui文本框{
填充：0 10px 0 0；
位置：相对位置；
}
.ui文本框范围{
利润率：0.10px；
}
.ui文本框：悬停：之后{
内容：“x”；
位置：绝对位置；
排名：0；
字体大小：16px；
右：20px；
}

一些标签

您不能“捕获”：将鼠标悬停在

：：伪元素之后。我建议使用一个额外的元素（如
span
）：


.ui文本框{
填充：0 10px 0 0；
位置：相对位置；
}
.ui文本框范围{
利润率：0.10px；
}
.ui文本框：悬停span.cross{
位置：绝对位置；
排名：0；
字体大小：16px；
右：20px；
能见度：可见；
}
.ui文本框span.cross{
可见性：隐藏；
}
.ui文本框：悬停范围。十字：悬停{
颜色：红色；
}

一些标签
x

.ui文本框{
填充：0 10px 0 0；
位置：相对位置；
}
.ui文本框范围{
利润率：0.10px；
}
.ui文本框：悬停：之后{
内容：“x”；
位置：绝对位置；
排名：0；
字体大小：16px；
右：20px；
}
.ui文本框：悬停：之后{
颜色：红色；
}

一些标签
也许这更接近你想要的（只是css）：

.ui文本框{
填充：0 10px 0 0；
位置：相对位置；
}
.ui文本框范围{
利润率：0.10px；
}
.ui文本框：在{
内容：“x”；
位置：绝对位置；
排名：0；
字体大小：16px；
右：20px；
颜色：蓝色；
}
.ui文本框：悬停：之前{
颜色：红色；
内容：“x”；
位置：绝对位置；
排名：0；
字体大小：16px；
右：20px；
z指数：10；
}
一些标签
我猜他只想在鼠标悬停在图标上时改变颜色。@ManojKumar感谢您的反馈。检查更新答案：）谢谢alex。我知道我可以这样做。我寻找更优雅的方式，所以我不需要每次都添加
。你看了吗？没有，他只想在图标上方悬停时更改颜色：）检查Alex的回答我同意Alex的回答是可以的。使用jQuery是可能的，你可以在这里找到更多答案。起点应该是隐藏图标，但是很好的尝试。
    .ui-textbox {  
        padding: 0 10px 0 0;             
        position: relative;
    }
    .ui-textbox span {
        margin: 0 10px;
    }
    .ui-textbox:after {
        content:"x";
        position: absolute;
        top: 0;    
        font-size: 16px;
        right: 20px;
        color:blue;
    }
    .ui-textbox:hover:before {
        color: red;
        content:"x";
        position: absolute;
        top: 0;    
        font-size: 16px;
        right: 20px;
        z-index:10;
    }

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