简介
在本实验中，我们将学习如何实现一种名为「兄弟元素渐变」的 CSS 效果。此效果能让鼠标悬停元素的兄弟元素渐隐，而悬停元素则保持完全可见。我们将使用 CSS 选择器和过渡以简单而优雅的方式实现此效果。完成本实验后，你将更好地理解如何使用 CSS 来创建动态且交互式的网页内容。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 100%。获得了学习者 100% 的好评率。
兄弟元素渐变
虚拟机中已经提供了 index.html 和 style.css。
要使鼠标悬停元素的兄弟元素渐隐：
- 使用
transition属性为opacity的变化添加动画效果。
span {
padding: 0 16px;
transition: opacity 0.3s;
}- 使用
:hover和:not伪类选择器，将鼠标未悬停其上的所有元素的opacity设置为0.5。
.sibling-fade:hover span:not(:hover) {
opacity: 0.5;
}以下是一个 HTML 代码示例：
<div class="sibling-fade">
<span>Item 1</span> <span>Item 2</span> <span>Item 3</span>
<span>Item 4</span> <span>Item 5</span> <span>Item 6</span>
</div>请点击右下角的“上线”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。
总结
恭喜你！你已完成「兄弟元素渐变」实验。你可以在 LabEx 中练习更多实验以提升你的技能。