纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存

在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括SVG、XHTML等）文档中元素样式的样式表语言。在这个特定的主题中，“纯CSS 鼠标经过DIV另一个显示隐藏 多个DIV并存”是指通过CSS实现的一种交互效果：当鼠标悬停在一个div上时，另一个关联的div会显示出来，同时其他无关的div保持隐藏状态。这种效果在创建导航菜单、下拉列表或卡片式布局时非常常见。 我们先理解基本的CSS选择器和伪类。选择器用于选取我们需要应用样式的HTML元素，如`div`。伪类如`:hover`则用于在特定的状态下改变元素的样式，例如当鼠标悬停在元素上时。在本例中，`:hover`伪类被用来在鼠标悬停时触发显示或隐藏的转换。 要实现这个效果，我们可以创建两个相关的div，一个初始为可见，另一个初始为隐藏。以下是一个简单的示例： ```html <div class="container"> <div class="show-on-hover">鼠标悬停我</div> <div class="hidden-div">显示的内容</div> </div> ``` 然后，我们用CSS来定义这些div的样式： ```css .hidden-div { display: none; /* 初始隐藏 */ } .container:hover .hidden-div { display: block; /* 当鼠标悬停在.show-on-hover上时显示 */ } .container:hover .show-on-hover { /* 可以在此添加一些鼠标悬停时的特殊样式 */ } ``` 在这个例子中，`.hidden-div`通过`display: none;`设置为默认隐藏。当鼠标悬停在`.show-on-hover`上时，由于`.container:hover .hidden-div`的选择器匹配，`.hidden-div`的`display`属性变为`block`，从而使其显示。 如果需要处理多个并存的div，可以为每个div组合使用不同的类名，并根据需要调整CSS规则。例如，如果有三个div，一个作为触发器，另外两个作为显示隐藏的目标： ```html <div class="container"> <div class="trigger">鼠标悬停我1</div> <div class="target1 hidden">显示的内容1</div> <div class="target2 hidden">显示的内容2</div> </div> ``` 对应的CSS可以是： ```css .hidden { display: none; } .container:hover .target1, .container:hover .target2 { display: block; } ``` 这样，当鼠标悬停在`.trigger`上时，`.target1`和`.target2`都会显示。如果希望仅显示其中一个，可以增加更具体的伪类选择器，如`.container:hover .target1`。 这个效果利用了CSS的动态性和交互性，无需JavaScript即可实现。这使得网页的响应更加快捷，同时也降低了代码复杂性。在实际项目中，开发者可以根据需求进行调整，比如添加过渡效果、动画等，以提升用户体验。