Heim > Artikel > Web-Frontend > So verwenden Sie CSS, um eine Maskenebene anzuzeigen, wenn die Maus darüber schwebt

So verwenden Sie CSS, um eine Maskenebene anzuzeigen, wenn die Maus darüber schwebt

不言Original: 2018-06-20 17:52:033251Durchsuche

Dieser Artikel zeigt Ihnen den Effekt von zwei Mausbewegungen, die die Maskenebene anzeigen. Beispielcodes für beide Effekte finden Sie in der Artikelleiste.

Lass uns mit einer einfachen Implementierung beginnen:

<!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>

Lass uns eine fortgeschrittenere machen:

<!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>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie CSS, um den Effekt der Maus-oben-Symbolrotation zu erzielen

So verwenden Sie CSS-Zeiger – Das Ereignisattribut implementiert den Mauspenetrationseffekt

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um eine Maskenebene anzuzeigen, wenn die Maus darüber schwebt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css pointer

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie die Appearance-Eigenschaft in CSS3, um das Erscheinungsbild eines Elements zu ändernNächster Artikel：So verwenden Sie die Appearance-Eigenschaft in CSS3, um das Erscheinungsbild eines Elements zu ändern

In Verbindung stehende Artikel

Mehr sehen