通过鼠标使图片交替显示

最新推荐文章于 2022-11-01 17:55:22 发布

青衫酒丶

最新推荐文章于 2022-11-01 17:55:22 发布

阅读量256

点赞数

分类专栏： css3 文章标签： css

本文链接：https://blog.csdn.net/weixin_45019566/article/details/107545589

版权

css3 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

伪类 after、before、hover

通过鼠标使图片交替显示
css代码使用的是预编译less，
简单分析：就是固定框200*200，设定超出不显示，在div同时放入两张图片，通过margin的方式进行切换，效果由transition属性，显得较为平滑

.all_size(@width:200px,@height:200px) {
  width: @width;
  height: @height;
}

.img_style(@url) {
  .all_size();
  content: "";
  display: inline-block;
  background-size: contain;
  background: url(@url) no-repeat center;
}
.img {
  .all_size();
  display: inline-block;
  overflow: hidden;

  .img_list {
    .all_size(400px,200px);
    display: inline-block;

    &::before {
      .img_style("../assets/imgaes/1.jpg");
      transition: margin 0.2s;
    }
    &::after {
      .img_style("../assets/imgaes/2.jpg");
    }
    &:hover::before {
      margin-left: -400px;
      transition: margin 0.2s;
    }
  }
}

<div class="img">
   <div class="img_list"></div>
</div>

如果看不懂less，就。。。

.img {
  display: inline-block;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.img_list {
  display: inline-block;
  width: 400px;
  height: 200px;
}

.img_list::before {
  content: "";
  display: inline-block;
  width: 200px;
  height: 200px;
  background: url("../assets/imgaes/1.jpg") no-repeat center;
  background-size: contain;
  transition: margin 0.2s;
}

.img_list::after {
  content: "";
  display: inline-block;
  width: 200px;
  height: 200px;
  background: url("../assets/imgaes/2.jpg") no-repeat center;
  background-size: contain;
}

.img_list:hover::before {
  margin-left: -400px;
  transition: margin 0.2s;
}