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，它会保持1.1 scale 180deg。但是当我点击项目时它不会旋转，直到我将鼠标移到项目区域之外。我甚至尝试将:hover添加到.rotated类。有没有人知道如何将两种效果结合起来？

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

Answer 1

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

a.rotated的特异性值为11。（类型+类）
a#iTryHtml5:hover的特异性为111。（type + id + pseudo class）
a#iTryHtml5.rotated也具有111的特异性。（type + id + class）

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

CSS转换悬停覆盖jQuery onclick addclass transform

1 个答案: