首頁 網頁資源RESOURCES CSS
網頁hover互動效果

網頁hover互動效果

2020.12.21
網頁hover互動效果
文字底線: 利用偽元素
這方法適合使用在單行,多行的話只有最下面有底線
展示
滑鼠移動至此查看效果
HTML
<div class="shape-ex1">滑鼠移動至此查看效果</div>
CSS
.shape-ex1{
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.shape-ex1:after{
    content: '';
    width: 0%;
    height: 1px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .3s linear;
}
.shape-ex1:hover::after{
    width: 100%;
}
文字底線: 利用另一個DIV當作底線
這方法適合使用在單行,多行的話只有最下面有底線
展示
滑鼠移動至此查看效果
HTML
<div class="shape-ex2">
    滑鼠移動至此查看效果
    <div class="shape-ex2-line" ></div>
</div>
CSS
.shape-ex2{
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.shape-ex2-line{
    width: 0%;
    height: 1px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .3s linear;
}
.shape-ex2:hover .shape-ex2-line{
    width: 100%;
}
文字顏色: 更改文字顏色
這方法使用時須注意與背景顏色
展示
滑鼠移動至此查看效果
HTML
<div class="shape-ex3">滑鼠移動至此查看效果</div>
CSS
.shape-ex3{
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: all .3s linear;
}
.shape-ex3:hover{
    color: #d81616;
}
文字顏色: 利用背景顏色配合文字顏色來凸顯
展示
滑鼠移動至此查看效果
HTML
<div class="shape-ex4">滑鼠移動至此查看效果</div>
CSS
.shape-ex4{
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: all .3s linear;
}
.shape-ex4:hover{
    color: #d81616;
}
其他類別