Catch：悬停事件在：选择器之后

Question

目标：

使用仅包含css3的删除图标创建一个简单的文本框元素。 该图标应将其颜色更改为blue上的hover。

进展：

使用一些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

你不能抓住＆＃34; ：将鼠标悬停在::after个伪元素上。我建议使用额外的元素（如span）：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

.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;
}
.ui-textbox:hover:after {
    color: red;
}

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

http://jsfiddle.net/konsoetw/

Answer 3

也许这更接近你想要的（只是css）： http://jsfiddle.net/konsoetw/3/

    .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>