Catch :hover event on :after selector

Question

Goal:

Create a simple text-box element with remove icon with css3 only. The icon should change his color to blue on hover.

Progress:

It's pretty easy to achieve my wish with a little html and css code.

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

My Problem:

Can't find out how to catch the hover event on the after element so I could change his color.

Something like:

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

Did you have a look [here](http://stackoverflow.com/questions/13233991/combine-after-with-hover) ? — Jordumus, Sep 08 '15 at 13:44

Alex Char · Answer 1 · 2015-09-08T13:48:41.540

4

You can not "catch" :hover on ::after pseudo-elements. I suggest the following using an extra element(like 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>

edited Sep 08 '15 at 13:48

answered Sep 08 '15 at 13:43

Alex Char

32,879
9
49
70

I guess he wants to change color only while hovering over that icon. – m4n0 Sep 08 '15 at 13:43
@ManojKumar thanks for feedback. Check update answer :) – Alex Char Sep 08 '15 at 13:49
1

Thanks alex. I know I can do it in this way. I looked for more elegant way, so I won't need to add the `` everytime. – Dvir Sep 08 '15 at 14:26

score 0 · Answer 2 · edited Sep 10 '15 at 12:39

0

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

edited Sep 10 '15 at 12:39

user229044

232,980
40
330
338

answered Sep 08 '15 at 13:50

Madalina Taina

1,968
20
26

Nope, he wants to change the color only while hovering over the icon :) Check Alex's answer – m4n0 Sep 08 '15 at 13:51
I agree that Alex's answer is ok. – Madalina Taina Sep 08 '15 at 13:54
It is possible with jQuery and You find here more answers http://stackoverflow.com/questions/19952986/css-change-color-of-after-element-on-hover – Madalina Taina Sep 08 '15 at 14:01

Madalina Taina · Answer 3 · 2015-09-08T16:04:58.130

Maybe this is closer to what you want (just 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>

The starting point should be with the icon hidden, But nice try. — Dvir, Sep 08 '15 at 16:08

Catch :hover event on :after selector

Goal:

Progress:

My Problem:

3 Answers3