August 23, 2018
最近做一個案子，並非一般型態的網站，必須大量使用程式碼來控制圖像位置與顯示，其中之一就是在 a:hover 或是其他元素 :hover 之下，同時指定多重指定一個以上的位置同時顯示不同元素，在以前一定要靠 Javascript +其他方式來寫，現在則只需要使用CSS3就可以辦到了。如果希望連結元素在一起或是下方元素span重疊後預設不顯示，可以在上層加上區塊元素（div）使用 position 來做文字元素（i or a or span）定位相對位置，應該就可以解決了，當然這裡只是簡單的範例。
範例參考：點這裡
CSS的部分
▲這裡的 visibility: visible（顯示）or hidden（隱藏） 跟disply不同；隱藏後，還是會將元素（span）的寬與高做保留。
HTML部分：
範例參考：點這裡
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;
}
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部分：
<i class="bLi01">
<a href="#">call text01</a>
<span class="bOver01">text01 is showing</span>
</i>
<i class="bLi02">
<a href="#">call text02</a>
<span class="bOver02">text02 is showing</span>
</i>
<i class="bLi03">
<a href="#">call text03</a>
<span class="bOver03">text03 is showing</span>
</i>
<a href="#">call text01</a>
<span class="bOver01">text01 is showing</span>
</i>
<i class="bLi02">
<a href="#">call text02</a>
<span class="bOver02">text02 is showing</span>
</i>
<i class="bLi03">
<a href="#">call text03</a>
<span class="bOver03">text03 is showing</span>
</i>
CSS nth-child（n）
不需要 Javascript 做
0 Comment(s)
