demo.html 990 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. .box {
  9. width: 300px;
  10. height: 100px;
  11. background: #0f0;
  12. }
  13. .btn {
  14. width: 300px;
  15. height: 100px;
  16. color: #00f;
  17. text-align: center;
  18. line-height: 100px;
  19. }
  20. .main {
  21. opacity: 0;
  22. /* display: none; */
  23. }
  24. .box:hover .main {
  25. opacity: 1;
  26. /* display: block; */
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <!--
  32. 类选择器
  33. 写法:
  34. 在body里
  35. 开始标签中 class="xxx"
  36. 在style中
  37. .xxx {样式....}
  38. -->
  39. <div class="box">
  40. <p class="btn">我的标签</p>
  41. <p class="main">具体内容</p>
  42. </div>
  43. </body>
  44. </html>