CSS transforms on hover overrides jQuery onclick addclass transform

Question

I am trying to get used to transforms here is what I tried to do:

<a id="iTryHtml5" href="IWUVUSWAGOVERFLOW">
    <img src="http://fc08.deviantart.net/fs71/f/2013/325/1/2/princess_kenny_by_nothguy-d6v47fq.jpg"/>
</a>

jQuery:

$("a#iTryHtml5").on("click", function (event) {
    event.preventDefault();

    if ($(this).hasClass("rotated")) {
        $(this).removeClass("rotated");
    } else {
        $(this).addClass("rotated");
    }
});

CSS

a.rotated{
    -webkit-transform: rotateY(180deg);
}

a#iTryHtml5 {
    -webkit-transition: all 2s ease;
}

a#iTryHtml5:hover {
    -webkit-transform: scale(1.1);
}

The desired effect I am trying to achieve is on:hover scale the item to 1.1. But on click rotateY it 180deg maintaining 1.1 scale. But when I click on the item it wont rotate until I move the mouse outside the items area. I even tried adding :hover to the .rotated class. Does any one know how I can combine the two effects?

I am currently testing on Chrome thats why only the webkit prefix.

Answer 1

It was basically just a specificity issue. Make the selector more specific.

• a.rotated has a specificity value of 11. (type + class)
• a#iTryHtml5:hover has a specificity of 111. (type + id + pseudo class)
• a#iTryHtml5.rotated also has a specificity of 111. (type + id + class)

Updated Example

a#iTryHtml5.rotated {
    -webkit-transform: rotateY(180deg);
}

When you were hovering over the element, the selector a#iTryHtml5:hover was overwriting the styling from a.rotated. You were therefore not seeing the element rotate until after the more specific selector was removed from the equation.

You should also add in the following selector to prevent another specificity issue when hovering over the rotated element. In other words, this just allows you to increase the scale of the element when hovering over the rotated version.

a#iTryHtml5.rotated:hover {
    -webkit-transform: scale(1.1) rotateY(180deg);
}