jquery - 悬停时的 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

它基本上只是一个 specificity issue 。让选择器更加具体。

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

Updated Example

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

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

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

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