在 :after 选择器上捕获 :hover 事件答案

【问题标题】：Catch :hover event on :after selector在 :after 选择器上捕获 :hover 事件
【发布时间】：2015-12-04 05:34:16
【问题描述】：

目标：

创建一个带有删除图标的简单文本框元素，仅带有css3。图标应在hover 上将其颜色更改为blue。

进展：

用一点 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;
}

【问题讨论】：

看here了吗？

标签： html css

【解决方案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>

【讨论】：

我猜他只想在将鼠标悬停在该图标上时更改颜色。
@ManojKumar 感谢您的反馈。检查更新答案:)
谢谢亚历克斯。我知道我可以这样做。我寻找更优雅的方式，所以我不需要每次都添加<span class'cross'>。

【解决方案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/

【讨论】：

不，他只想在将鼠标悬停在图标上时更改颜色:) 检查亚历克斯的答案
我同意亚历克斯的回答是可以的。
使用 jQuery 是可能的，您可以在这里找到更多答案stackoverflow.com/questions/19952986/…

【解决方案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>

【讨论】：

起点应该是隐藏图标，但是不错的尝试。