Question: I am trying to add hover functionality to a checkbox element but as you can see in [This Demo](http://jsfiddle.net/V5dKq/) it is not working.
can you please let me know why this is happening?

```
input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}
input[type="checkbox"]:hover  {
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -15px top no-repeat;
}

```

Answer: 
Your code is replacing the actual checkbox with your own graphical representation added to the beginning of the label. The checkbox itself is actually hidden from view, and so your hover state doesn't work. Your hover needs to be on the label instead.

[JSFiddle Demo](http://jsfiddle.net/V5dKq/2/)

Change this selector:

```
input[type="checkbox"]:hover  {
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -15px top no-repeat;
}

```

To this:

```
input[type="checkbox"] + label span:hover  {
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -15px top no-repeat;
}

```

Note that in my JS Fiddle, I also changed the px value on the background to show the correct sprite, you will need to do the same.
Use this

```
input[type="checkbox"]:hover + label span:hover {
    background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}

```