標題:CSS 替代 Javascript 與 DHTML 寫法 多重hover
出處:A.PAO designSTUDIO BLOG
時間:Thu, 23 Aug 2018 20:38:43 +0000
作者:apao
地址:https://blog.apao.idv.tw/post/1268/
內容:
最近做一個案子,並非一般型態的網站,必須大量使用程式碼來控制圖像位置與顯示,其中之一就是在 a:hover 或是其他元素 :hover 之下,同時指定多重指定一個以上的位置同時顯示不同元素,在以前一定要靠 Javascript +其他方式來寫,現在則只需要使用CSS3就可以辦到了。如果希望連結元素在一起或是下方元素span重疊後預設不顯示,可以在上層加上區塊元素(div)使用 position 來做文字元素(i or a or span)定位相對位置,應該就可以解決了,當然這裡只是簡單的範例。
點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=2959
範例參考:點這裡
CSS的部分
a{
font-size: 24px;
}
a:hover{
background: rgba(144,0,2,1.00); color:rgba(255,255,255,1.00);
}
span{
visibility: hidden;
display: block;
width: 100%;
overflow: hidden;
margin: 0 0 20px 10px;
font-size: 30px;
}
i.bLi01:hover span.bOver01{
visibility: visible;
}
i.bLi02:hover span.bOver02{
visibility: visible;
}
i.bLi03:hover span.bOver03{
visibility: visible;
}
▲這裡的 visibility: visible(顯示)or hidden(隱藏) 跟disply不同;隱藏後,還是會將元素(span)的寬與高做保留。
HTML部分:
call text01
text01 is showing
call text02
text02 is showing
call text03
text03 is showing
Generated by Bo-blog 2.1.1 Release