如何用css控制伪元素,再也不用多写个div

使用伪元素实现hover动态效果。

以下是通过控制伪元素的背景来实现一个图片从右边向左边进入,看懂了就很容易明白。

欢迎交流

.nav {
  //line-height: @navbar_height;
  li{
    margin-left: 20px;
    width: 128px;
    height: 46px;
    text-align: center;
    position: relative;
    &:before{
      width: 128px;
      height: 46px;
      content:"";
      position: absolute;
      top:0;
      left:0;
      background-image: url(../../assets/images/navbarBg.png);
      background-size: cover;
      background-position: 80px;
      background-repeat: no-repeat;
      transition: all .4s linear;
      opacity: 0;
      z-index: -1;
    }
    a {
      text-align: center;
      padding: 0 25px 10px 2px;
      border-bottom: 5px solid transparent;
      font-size: @nav_font_size;
      color: @font_base_color_dark;
      line-height: 46px;
      opacity: 1;
    }
    &:hover::before{
      background-position: 0;
      opacity: 1;
    }
    &:hover a {
      color: #fff;
    }
    .active0 {
      border-bottom: 3px solid @font_base_color;
      //color:@nav_hover;
    }
  }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

1 条评论
登录 后参与评论

扫码关注云+社区