CSS转换 - 我需要一个解释

Question

我试图在CSS中转换一些元素。我通过为每个要转换的元素添加一个单独的选择器使其工作正常，但当我为所有元素使用一个选择器（它们最终在同一个地方）时，它不起作用。有人能解释为什么它不能像这样工作吗？

body { 
 
\t \t text-align: center; 
 
\t } 
 

 
\t .block { 
 
\t \t position: relative; 
 
\t \t display: inline-block; 
 
\t } 
 

 
\t .part1 { 
 
\t \t font-family: Arial; 
 
\t \t font-size: 50px; 
 
\t \t font-weight: bold; 
 
\t \t opacity: 0.2; 
 
\t \t position: relative; 
 
\t \t z-index: 1; 
 
\t } 
 

 
\t .part { 
 
\t \t font-family: Arial; 
 
\t \t font-size: 50px; 
 
\t \t font-weight: bold; 
 
\t \t opacity: 0.2; 
 
\t \t position: absolute; 
 
\t \t transition: top 2s ease-in, left 2s ease-in, right 2s ease-in; 
 
\t } 
 

 
\t .block .part:nth-child(2) { 
 
\t \t top: 100px; 
 
\t \t left: 100px; 
 
\t } 
 

 
\t .block .part:nth-child(3) { 
 
\t \t top: 0; 
 
\t \t left: 200px; 
 
\t } 
 

 
\t .block .part:nth-child(4) { 
 
\t \t top: 0; 
 
\t \t right: 200px; 
 
\t } 
 

 
\t .block .part:last-child { 
 
\t \t top: 100px; 
 
\t \t right: 100px; 
 
\t } 
 

 
\t .block .part1:hover ~ .part { 
 
\t \t top: 0; 
 
\t \t left: 0; 
 
\t \t right: 0; 
 
\t }

<span class="block"> 
 
\t \t <span class="part1">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
</span>

正如你可以看到，左边的属性不为第四和第五元素过渡。

这里的工作片断：

body { 
 
\t \t text-align: center; 
 
\t } 
 

 
\t .block { 
 
\t \t position: relative; 
 
\t \t display: inline-block; 
 
\t } 
 

 
\t .part1 { 
 
\t \t font-family: Arial; 
 
\t \t font-size: 50px; 
 
\t \t font-weight: bold; 
 
\t \t opacity: 0.2; 
 
\t \t position: relative; 
 
\t \t z-index: 1; 
 
\t } 
 

 
\t .part { 
 
\t \t font-family: Arial; 
 
\t \t font-size: 50px; 
 
\t \t font-weight: bold; 
 
\t \t opacity: 0.2; 
 
\t \t position: absolute; 
 
\t \t transition: top 2s ease-in, left 2s ease-in, right 2s ease-in; 
 
\t } 
 

 
\t .block .part:nth-child(2) { 
 
\t \t top: 100px; 
 
\t \t left: 100px; 
 
\t } 
 

 
\t .block .part:nth-child(3) { 
 
\t \t top: 0; 
 
\t \t left: 200px; 
 
\t } 
 

 
\t .block .part:nth-child(4) { 
 
\t \t top: 0; 
 
\t \t right: 200px; 
 
\t } 
 

 
\t .block .part:last-child { 
 
\t \t top: 100px; 
 
\t \t right: 100px; 
 
\t } 
 

 
\t .block .part1:hover ~ .part:nth-child(2) { 
 
\t \t top: 0; 
 
\t \t left: 0; 
 
\t } 
 

 
\t .block .part1:hover ~ .part:nth-child(3) { 
 
\t \t left: 0; 
 
\t } 
 

 
\t .block .part1:hover ~ .part:nth-child(4) { 
 
\t \t right: 0; 
 
\t } 
 

 
\t .block .part1:hover ~ .part:last-child { 
 
\t \t top: 0; 
 
\t \t right: 0; 
 
\t }

<span class="block"> 
 
\t \t <span class="part1">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t \t <span class="part">O</span> 
 
\t </span>

为什么会出现这种情况？我无法在文档中找到答案。

Answer 1

你的问题，是因为当你共享同一:hover规则，你设置你的第四和第五元素left: 0，所以他们会得到相应positionated他们的父母是相对的（.block），那么就没有空间让他们根据你的愿望做动画。当您使用单独的选择器时，left保持其默认值auto，然后right正确地在这两个元素上进行动画。

如果您未指定left或right，则其默认值为auto，而不是0。 C heck MDN docs.

Answer 2

尽管@Juan已经回答了，您可以考虑使用translate prop而不是绝对位置左上角。 下面是一篇关于： http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

body { 
    text-align: center; 
} 

.block { 
    position: relative; 
    display: inline-block; 
} 

.part1 { 
    font-family: Arial; 
    font-size: 50px; 
    font-weight: bold; 
    opacity: 0.2; 
    position: relative; 
    z-index: 1; 
} 

.part { 
    font-family: Arial; 
    font-size: 50px; 
    font-weight: bold; 
    opacity: 0.2; 
    position: absolute; 
display:block; 
    transition: all 2s linear; 
} 

.block .part:nth-child(2) { 
top:0; 
left:0; 

transform:translate(100px,100px); 
} 

.block .part:nth-child(3) { 
top:0; 
left:0; 
transform:translate(200px,0); 
} 

.block .part:nth-child(4) { 
top:0; 
left:0; 
transform:translate(-200px,0); 

} 

.block .part:last-child { 
top:0; 
left:0; 
transform:translate(-100px,100px); 

} 

.block .part1:hover ~ .part { 
    transform: translate(0,0); 
}