效果
點這裡
出現了
CSS
.clickme{
background-color:#fc9;
padding: 5px;
width: 100px;
}
.showthis{
background-color:#f90;
padding: 20px;
width: 100px;
display:none;
}
.clickme:focus + .showthis{
display:block;
}
HTML
點這裡
出現了
注意:那個「tabindex=”0″」很重要,要有這個語法,這個 div 才能成為焦點元件,就是可以被選到的意思。
點選後要套用到哪個元素可以參考「選擇器 class 與 id 以及階層關係」
我們可以試著做一點變化,加入一點動畫,把高度做一個縮放。
CSS
.clickme{
background-color:#fc9;
padding: 5px;
width: 100px;
cursor: pointer;
}
.showthis{
background-color:#f90;
width: 100px;
max-height: 0;
opacity: 0;/*透明度*/
transition: 0.6s;
}
.clickme:focus + .showthis{
opacity: 1;
padding: 20px;
max-height: 100%;
}
HTML
點這裡1
出現了1
點這裡2
出現了2
點這裡3
出現了3