Question

我在div元素上应用宽度转换，其上的动画效果很好。但是为CSS中的相同div提供高度和宽度会阻止动画。我错过了什么？

悬停时，颜色和动画都不会改变。如何为所有div提供通用样式：

默认样式
悬停时的样式

#div2 {

/*Un-commenting the below part, fails the animation assigned to this div
    width:100px;
    height:50px;
*/
    -webkit-transition:width 3s;
    background-color:blue;
}

div {
    width:100px;
    height:50px;
    background:red;
    color:white;
    font-weight:bold;
    -webkit-transition:width 2s;
}

 #div1 {
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
}
#div2 {
    -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}
div:hover {
    width:300px;
    color:black;
}

Answer 1

你遇到的问题是因为选择器的specifity。这并不是因为拥有width或height，而是因为它们的规则更具体，因此具有优先权。

在您的特定情况下，具有ID的规则优先于具有元素（DIV标记）和伪选择器（:hover）的规则。

让我们先考虑ID width被注释掉的情况。将用于width的{{1}}，蓝色的div2可能来自这些规则：

div →宽度：100px
div：悬停→宽度：300px

当用户没有悬停时，选择的唯一规则将进一步缩减为：

div →宽度：100px

因此浏览器会选择那个，因为唯一可用的浏览器。当用户将鼠标悬停在div上时，我们可以在2个之间进行选择。由于 div：hover 更具体，浏览器会为该值选择300px。

让我们看看当您在width取消评论#div2时会发生什么。

现在您有3个可供选择的规则。

div →宽度：100px
#div2 →宽度：100px
div：悬停→宽度：300px

当没有悬停时，这会减少到

div →宽度：100px
#div2 →宽度：100px

从两个中更具体且胜出的是#div2（你没有注意到差异，因为它们的值都是100px）。

当用户将光标移到div上并且现在正在悬停时，浏览器将再次从所有3个规则中进行选择。这次胜利者不是你认为会赢的人。相反，#div2胜过其他两个，即使是具有:hover伪类的那个，因为它更具体。该规则仅适用于ID为div2的元素，而不适用于所有div上的所有width。因此，为#div2:hover选择的值再次为100px。因此，没有可见的动画。这是因为元素没有得到不同的宽度值。

如何解决这个问题。如果您要使用ID设置初始宽度，则还需要:hover规则。您可以修改现有的:hover规则，以避免重复（尽管在更复杂的情况下，您可能不希望复制规则的所有属性，并且更喜欢使用2个单独的div:hover , #div2:hover { width:300px; }规则）：

.blueDiv

另一种选择是使用#div2规则而不是.blueDiv { width:100px; }规则，以便具有该类的规则比非悬停元素1更具体，但不超过悬停规则要素一。

{{1}}

Answer 2

由于ID中的样式会覆盖前面提到的标记样式，因此悬停也会被覆盖。

如果您为ID应用单独的维度，则需要分别为ID定义其悬停宽度。

在你的情况下是这样的：

#div2{
width:100px;
height:50px;
-webkit-transition:width 3s;
background-color:blue;
}

#div2:hover{
    width:300px;
}

your modified jsfiddle

中的示例

Answer 3

这是笨拙的，但我使用CLASS而不是ID提供相同的属性，动画和属性（字体颜色，宽度和高度）正常工作。

所以我认为提供使用ID的属性可以被覆盖..所以使用类总是安全的。

提供宽度或高度时，CSS 3动画不起作用

3 个答案: