滑鼠懸浮時發生的效果改變
阿新 • • 發佈:2019-02-12
1,滑鼠懸浮時發生簡單的字型或背景顏色的改變
沒有懸浮的樣式
.project .left2 li a{background: url("image/cgal_tb1.jpg") no-repeat 30px center;display: block;padding-left:50px;line-height:45px;font-size:14px;color:#666;}
當滑鼠懸浮時效果成:
A用純HTML寫:
.project .left2 li a:hover{background:#FFBF4B url("image/cgal_tb2.jpg") no-repeat 30px center;color:#fff;text-decoration:none;}
B用純js寫
.project .left2 li a.on{background:#FFBF4B url("image/cgal_tb2.jpg") no-repeat 30px center;color:#fff;text-decoration:none;}
C混合寫法html和js(注意on後面的逗號,表示或者的意思它的後面跟的內容懸浮改變的狀態)
.project .left2 li a.on,
.project .left2 li a:hover{background:#FFBF4B url("image/cgal_tb2.jpg") no-repeat 30px center;color:#fff;text-decoration:none;}
2滑鼠懸浮時發生圖片卻換效果