悬停时的CSS转换覆盖jQuery onclick addclass转换

我正在尝试适应转换，以下是我尝试做的：

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

CSS

我试图达到的理想效果是：悬停将项目缩放到1.1。但是，单击旋转键将其旋转180度，保持1.1的比例。但是当我点击项目时，它不会旋转，直到我将鼠标移到项目区域之外。我甚至尝试将

：hover

添加到

.rotated

类中。有人知道我如何结合这两种效果吗

我目前正在Chrome上测试，这就是为什么只有webkit前缀。

它基本上只是一个前缀。使选择器更具体

• a.rotated

  的特异性值为

  11

  。（类型+类别）

• a#iTryHtml5:hover

  具有

  111

  的特异性。（类型+id+伪类）

• a#iTryHtml5.旋转

  也具有

  111

  的特异性。（类型+标识+类别）

当您将鼠标悬停在元素上时，选择器

a#iTryHtml5:hover

正在覆盖

a.rotated

中的样式。因此，直到从方程式中删除更具体的选择器之后，您才看到元素旋转

您还应该添加以下选择器，以防止在将鼠标悬停在旋转的元素上时出现另一个特殊性问题。换句话说，这只允许您在将鼠标悬停在旋转版本上时增加元素的比例

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

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

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

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

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

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