Npcink Blog
切换菜单

hover 选择器设置其它元素 - CSS 笔记

通过 hover 选择器设置其它元素

最后更新于
本页目录2 节

我们可以通过 hover 选择器来做出一些有趣的动画效果，常见的是把鼠标移动到一个 div 上，显示其他的 div 元素。就像下面这个一样。

效果预览

<div class="n-box">
    <div class="box-one">111</div>
    <div class="box-two">222</div>
</div>
<style type="text/css">


.box-two {
    visibility: hidden;/*占位隐藏*/
    opacity: 0;/*透明度*/
}


.n-box:hover .box-two{
    visibility: visible;/*占位显示*/
    opacity: 1;/*透明度*/
}
.n-box {
    padding: 2em;
    background-color: blue;
}
.box-one {
    padding: 2em;
    background-color: yellow;
}
.box-two {
    padding: 2em;
    background-color: red;
}
</style>

技术分析

一个父盒子和甲、乙两个子盒子，要通过甲盒子控制乙盒子，需要给父盒子做 hover。