Hover on Button not Working

[jubcheng]

I have a button with a span which displays an icon.
I can change the icon color, but not on hover.

<button class="button" type="submit" value="Add To Cart"> <span class="ico ti-shopping-cart"></span></button>

.ico {
    display: block;
    color: #fff;
}

.ico:hover {
    color: #ED1C24;
}

button {
    text-align: center;
    background: transparent;
    font-size: 50px;
    transition: all 0.3s ease 0s;
    margin: 50% 20px 0 0;
    border: none;
    width: auto;
    height: 50px;
}

What am I doing wrong ?

[Beverleyh]

Do you mean that you want to change the icon colour when you hover over the button? Try

button:hover > .ico

[jubcheng]

Thank you very much, this worked like a charm.

[Author]

Posts