CSS的悬停变换覆盖jQuery的onclick addclass变换

Question

我正在尝试适应转换，这是我试图做的:

<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);
}

我想要达到的效果是on:hover将项目缩放到1.1。但在点击rotateY时，它达到180度，保持1.1 scale。但是当我点击项目时，它不会旋转，直到我将鼠标移到项目区域之外。我甚至尝试将:hover添加到.rotated类中。有人知道怎么把这两种效果结合起来吗?

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

Answer 1

这基本上只是一个具体问题。让选择器更具体。

• a.rotated的特异性值为11。(type + class)
• a#iTryHtml5:hover对111具有特异性。(类型+ id +伪类)
• a#iTryHtml5.rotated也具有111的特异性。(type + id + class)

更新示例

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

当您将鼠标悬停在元素上时，选择器a#iTryHtml5:hover正在覆盖a.rotated的样式。因此，直到从公式中删除了更具体的选择器之后，您才会看到元素旋转。

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

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