代码改变世界

label 实现隐藏文字

2017-10-29 23:01  那些年111  阅读(2356)  评论(0)    收藏  举报 
html
在div 里建立一个属性名 <div class="detail">
    <input type="checkbox" id="click">
   
    <label for="click"><img src=""></label>
</div>

css在属性名中
.detail{
隐藏文中的文字    overflow: hidden;
                  }
#click:checked+p{
    height: auto;
}
隐藏input边框 input{
           display: none;
}

旋转上下图标 #click:checked~label[for="click"] img{
    transform: rotate(180deg);
}