1. 程式人生 > >滑鼠懸浮時發生的效果改變

滑鼠懸浮時發生的效果改變

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滑鼠懸浮時發生圖片卻換效果