1

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

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

  1. 默认样式
  2. 悬停样式

JS Fiddle 示例在这里，片段在这里：

#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;
}
4

3 回答 3

3

您遇到的问题是因为选择器的特殊性。这并不是因为有widthor height，而是因为它们处于更具体的规则中，因此具有优先权。

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

让我们首先考虑 IDwidth被注释掉的情况。将width用于 的div2，蓝色的，可能来自以下规则：

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

当用户没有悬停时，唯一可供选择的规则会进一步减少为：

  • div → 宽度：100px

因此浏览器会选择那个，因为只有一个可用。当用户将鼠标悬停在 div 上时，我们可以在这两个之间进行选择。由于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悬停的 s。所以为 选择的值width又是 100px。因此没有可见的动画。这是因为元素没有获得不同的宽度值。

如何解决这个问题。如果您要使用 id 来设置初始宽度，您还需要有一个#div2:hover规则。您可以像这样修改现有:hover规则以避免重复（尽管在更复杂的情况下，您可能不想复制规则的所有属性，而是希望有 2 个单独的:hover规则）：

div:hover , #div2:hover
{
    width:300px;
}

另一种选择是使用.blueDiv规则而不是规则#div2，这样具有类的规则比非悬停元素更具体，但不比悬停规则元素更具体。

.blueDiv
{
    width:100px;
}
于 2013-11-09T12:14:14.173 回答
0

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

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

于 2013-11-09T11:17:04.777 回答
0

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

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

在你的情况下是这样的：

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

#div2:hover{
    width:300px;
}

修改后的 jsfiddle中的示例

于 2013-11-09T07:47:08.093 回答