AI智能
改变未来

01.CSS伪类元素hover的简单应用


目标:鼠标悬浮时显示子类隐藏内容

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>

 

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 01.CSS伪类元素hover的简单应用