如何使用CSS實現滑鼠懸浮出現遮罩層-css教學-PHP中文網

首頁

web前端

css教學

如何使用CSS實現滑鼠懸浮出現遮罩層

不言

Jun 20, 2018 pm 05:52 PM

css 懸浮遮罩層滑鼠

這篇文章跟大家分享了兩個滑鼠懸浮出現說明遮罩層的效果，大家可以依照自己的需求選擇某一種效果，兩種效果文都給了實例程式碼，下面來一起看看吧。

先來個簡單的實作方法：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  .mask-wrapper {
      position: relative;
      overflow: hidden;
  }
  .mask-inner {
      position: absolute;
      left: 0;
      top: 100%;
      width: 100%;
      height: 100%;
      -moz-transition: top ease 200ms;
      -o-transition: top ease 200ms;
      -webkit-transition: top ease 200ms;
      transition: top ease 200ms;
  }
  .mask-wrapper:hover .mask-inner {
      top: 0;
  }
  #my-mask {
      width: 300px;
      height: 200px;
      background: red;
  }
  #my-mask .mask-inner {
      background: rgba(0,0,0,.5);
  }
 </style>
</head>
<body>
 <p id="my-mask" class="mask-wrapper">
    <p>Lorem ipsum</p>
    <p class="mask-inner">
        <p>foo bar</p>
    </p>
</p>
</body>
</html>

登入後複製

來個更高階點的：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
  * {
      margin: 0;
      padding: 0;
  }
  body {
      font: 12px/1.5 arail;
  }
  ul {
      list-style: none;
  }
  .icon-lists {
      overflow: hidden;
      background: #f7f7f7;
      padding: 40px;
  }
  .icon-lists .box {
      float: left;
      margin-right: 10px;
  }
  .box {
      position: relative;
      width: 46px;
      height: 46px;
      overflow: hidden;
      z-index: 1;
  }
  .box i, .box .info {
      display: block;
      width: 46px;
      height: 46px;
      border-radius: 46px;
  }
  .box .shadow {
      position: absolute;
      top: 0;
      z-index: 10;
      border-radius: 0;
      background: url(<a href="http://xiaomingming.qiniudn.com/shadow.png">http://xiaomingming.qiniudn.com/shadow.png</a>) no-repeat;
  }
  .box .icon {
      position: absolute;
      top: 0;
      line-height: 46px;
      text-align: center;
      background: #eee;
      color: #333;
      font-size: 14px;
  }
  .box .info {
      position: absolute;
      top: 46px;
      z-index: 2;
      background: orange;
      color: #fff;
      text-align: center;
      line-height: 46px;
      -webkit-transition:top .2s ease-in;
      -moz-transition:top .2s ease-in;
      transition:top .2s ease-in;
  }
  .box:hover>.info {
      top:0;
  }</p>
<p> </style>
</head>
<body>
     <ul class="icon-lists">
        <li class="box">
            <i class="shadow"></i>
            <i class="icon">A</i>
            <p class="info">服装</p>
        </li>
        <li class="box">
            <i class="shadow"></i>
            <i class="icon">B</i>
            <p class="info">鞋包</p>
        </li>
        <li class="box">
            <i class="shadow"></i>
            <i class="icon">C</i>
            <p class="info">配饰</p>
        </li>
        <li class="box">
            <i class="shadow"></i>
            <i class="icon">D</i>
            <p class="info">运动</p>
        </li>
    </ul>
</p>
</body>
</html>

登入後複製

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7786

Java教學

1644

CakePHP 教程

1401

Laravel 教程

1297

PHP教程

1234

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。