美文网首页
纯css实现点击变色

纯css实现点击变色

作者: Sasoli | 来源:发表于2018-03-02 18:03 被阅读0次

    使用伪类选择器
    :active 在点击状态下变色(鼠标需长按)
    :focus 在聚焦状态下变色(鼠标可以离开但是在其他地方点击取消聚焦)
    div li 等标签如果要实现此效果需要在标签加tabindex属性

    <li tabindex="1">点击变色</li>
    li{
            position: relative;
            width: 200px;
            height: 62px;
            border-bottom: 1px solid #ddd;
            cursor: pointer;
            &:hover,&:active,&:focus{
              &{
                outline: none;
              }
              &:before{
                background: red;
              }
            }
            &:before{
              position: absolute;
              left: 0;
              top: 0;
              content: '';
              width: 16px;
              height: 100%;
              background: #fff;
            }
          }
    

    相关文章

      网友评论

          本文标题:纯css实现点击变色

          本文链接:https://www.haomeiwen.com/subject/rqnaxftx.html