鼠标滑过显示详情

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鼠标滑过显示详情</title>
  6.     <!-- IMPORT CSS -->
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         .box {
  13.             /* CSS3新盒子模型属性：控制 WIDTH / HEIGHT 是盒子最终的宽高 */
  14.             box-sizing: border-box;
  15.             margin: 20px auto;
  16.             width: 200px;
  17.             height: 40px;
  18.             line-height: 40px;
  19.             text-align: center;
  20.             border: 1px solid lightcoral;
  21.             position: relative;
  22.         }
  23.         .box .detail {
  24.             display: none;
  25.             position: absolute;
  26.             right: -1px;
  27.             top: 38px;
  28.             z-index: -1;
  29.             box-sizing: border-box;
  30.             width: 500px;
  31.             height: 100px;
  32.             line-height: 100px;
  33.             text-align: center;
  34.             border: 1px solid lightcoral;
  35.         }
  36.         .box:hover {
  37.             border-bottom-color: #FFF;
  38.         }
  39.         .box:hover .detail {
  40.             display: block;
  41.         }
  42.         /* 如果是点击实现显示，不需要基于 JS 也可以，可以基于 :target 实现手风琴效果 */
  43.     </style>
  44. </head>
  45. <body>
  46.     <!-- 基于 CSS 实现，我们需要让详情区域是按钮的子元素 -->
  47.     <div class="box">
  48.         <span>购物车</span>
  49.         <div class="detail">
  50.             购物车的相关信息
  51.         </div>
  52.     </div>
  53. </body>
  54. </html>