遮罩条

文章转载，请注明出处 H-ui前端框架，网址http://www.h-ui.net/

4.19.1 遮罩条

自适应高度，默认隐藏，鼠标经过，从底部滑出显示

遮罩条

4.19.2 遮罩块

模块内100%高度，默认隐藏，鼠标经过显示

HTML SCSS CSS JS

<div class="hui-mask" style="width:300px; height:250px; border:solid 1px #ddd;">
  <img src="//images.h-ui.net/www/AD-300x250.gif" width="300" height="250">
  <div class="mask-bar text-c">遮罩条</div>
</div>

.hui-mask {
  position: relative;
  overflow: hidden;
  .mask-bar {
    position: absolute;
    height: auto;
    left: 0;
    bottom: -100%;
    right: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2;
    color: #fff!important;
  }
  &.hover .mask-bar {
    bottom: 0px;
    -ms-transition: bottom 200ms;
    transition: bottom 200ms;
  }
  .mask-box {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    color: #fff!important;
  }
  &.hover .mask-box {
    background-color: rgba(0, 0, 0, 0.6);
    -ms-transition: all 500ms;
    transition: all 500ms;
  }
}

.hui-mask {
  position: relative;
  overflow: hidden;
}
.hui-mask .mask-bar {
  position: absolute;
  height: auto;
  left: 0;
  bottom: -100%;
  right: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 2;
  color: #fff !important;
}
.hui-mask.hover .mask-bar {
  bottom: 0px;
  transition: bottom 200ms;
}
.hui-mask .mask-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  color: #fff !important;
}
.hui-mask.hover .mask-box {
  background-color: rgba(0, 0, 0, 0.6);
  transition: all 500ms;
}

$(function(){
  $.Huihover('.hui-mask')
});