html - CSS 过渡——我需要一个解释

Question

我试图通过 CSS 中的过渡来移动一些元素。我通过为我想要转换的每个元素添加一个单独的选择器使其工作正常，但是当我对所有元素使用一个选择器时它不起作用(无论如何它们最终都在同一个地方)。有人可以解释为什么它不能像这样工作吗？

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;
		transition: top 2s ease-in, left 2s ease-in, right 2s ease-in;
	}

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

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

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

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

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

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

如您所见，left 属性不会为第四个和第五个元素转换。

这是工作片段:

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;
		transition: top 2s ease-in, left 2s ease-in, right 2s ease-in;
	}

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

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

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

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

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

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

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

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

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

为什么会这样？我在文档中找不到答案。

Answer 1

你的问题是因为当你共享相同的 :hover 规则时，你在第四和第五个元素上设置了 left: 0，所以它们会相对于它们的父级 (.block) 进行定位，然后它们就没有空间按照您的意愿进行动画处理。当您使用单独的选择器时，left 保持其默认值 auto，因此 right 会正确地在这两个元素上设置动画。

如果您没有指定 left 或 right，它们的默认值为 auto，而不是 0。 C heck MDN docs.