animated font awsome icon and text

[ohno]

I have the following html :-

<div id="cart_change_card" 
                                    <label>You have selected: <img src="{$smarty.const.SITE_ROOT}{$smarty.const.IMG_DIR}/{$cart->mCardImage}" alt="{$cart->mCard}" height="60" /><br /> <a class="red" href="{$smarty.const.SITE_ROOT}/cart/payment/card/"><i class="fa fa-refresh fa-2x fa-spin-hover"></i> Change Card Type</a></label>
									</div>

& the following CSS :-

 

#cart_change_card .fa-spin-hover:hover {
   -webkit-animation: spin 2s;
   -moz-animation: spin 2s;
   -o-animation: spin 2s;
   animation: spin 2s;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}



#cart_change_card a { color: #118df2; font-weight: 700; }
#cart_change_card a:hover { color: #1BC1FF; text-decoration: none; -webkit-transition-duration: 0.2s; }

This works as expected, you can click on the text link or the fontawesome icon or the text & be taken to the correct page. However, what I wanted to happen was the font awesome icon spin if the mouse is over the icon OR the text (currently it only animates if the mouse is over the icon).

Is that possible?

Thanks for any help...

[requinix]

Your CSS has the animation set to happen when the icon is hovered over. Change it to animate when hover is over the <a>.

[ohno]

I have tried that and it doesn't seem to work (unless I got the CSS wrong!)

 

Thanks for your reply.

[requinix]

What did you try?

[ohno]

#cart_change_card a :hover {
   -webkit-animation: spin 2s;
   -moz-animation: spin 2s;
   -o-animation: spin 2s;
   animation: spin 2s;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

 

[kicken]

#cart_change_card a :hover

That is incorrect.  That says 'some element in :hover state that is a child of an A tag which is a child of #cart_change_card'

You want to apply the :hover to the A tag itself which means no space.  You also still want to target the icon for the animation so you still need to select that.

#cart_change_card a:hover .fa-spin-hover

That says 'The .fa-spin-hover element which is a child of an A tag in the :hover state, which is a child of #cart_change_card'

 

[ohno]

Thanks, I'll give it a go