简介
在本实验中,我们将学习如何实现一种名为「兄弟元素渐变」的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