目标:鼠标悬浮时显示子类隐藏内容
1.用display:none;将想要隐藏的内容隐藏
2.使用hover元素将.box1改为块元素,即可显示出之前隐藏的内容
.
3.自己练习的代码:
[code]<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>display-nano</title><style type=\"text/css\">.box{font-size: 20px;display: inline-block;}.box1{background-color: green;font-size: 30px;width: 100px;height: 100px;/*display: none;属性可使元素在页面隐藏显示*/display: none;}.h1{font-size: 20px;}.box:hover .box1{/*鼠标悬浮时使.box1类变为快元素显示*//*注意:不可跨父类悬浮显示*/display: block;}</style></head><body><!--只能在一个大类中悬浮显示,跨父类显示不可--><div class=\"box\"><h1 class=\"h1\">显示东西</h1><div class=\"box1\">隐藏的内容</div></div></body></html>