CSS 兄弟元素渐变效果

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将学习如何实现一种名为「兄弟元素渐变」的CSS效果。此效果能让鼠标悬停元素的兄弟元素渐隐,而悬停元素则保持完全可见。我们将使用CSS选择器和过渡以简单而优雅的方式实现此效果。完成本实验后,你将更好地理解如何使用CSS来创建动态且交互式的网页内容。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") subgraph Lab Skills css/selectors -.-> lab-35240{{"`CSS 兄弟元素渐变效果`"}} css/margin_and_padding -.-> lab-35240{{"`CSS 兄弟元素渐变效果`"}} css/pseudo_classes -.-> lab-35240{{"`CSS 兄弟元素渐变效果`"}} css/transitions -.-> lab-35240{{"`CSS 兄弟元素渐变效果`"}} end

兄弟元素渐变

虚拟机中已经提供了 index.htmlstyle.css

要使鼠标悬停元素的兄弟元素渐隐:

  1. 使用 transition 属性为 opacity 的变化添加动画效果。
span {
  padding: 0 16px;
  transition: opacity 0.3s;
}
  1. 使用 :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中练习更多实验以提升你的技能。

您可能感兴趣的其他 CSS 教程