滑鼠懸停，背景顏色變化問題

-Advertisement-

實例代碼：同理可應用在超鏈接、按鈕等中 ...

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        *{margin: 0; padding: 0;}
        .container{
            margin: 0 auto;
            padding-top: 30px;
            width: 1000px;
        }
        .btn{
            display: inline-block;
            padding: 0 30px;
            width: auto;
            height: 35px;
            font: 14px/35px 'microsoft yahei';
            color: #fff; border: 0;
            border-radius: 3px;
            text-align: center;
            cursor: pointer;
            /*實現漸變（時間變化效果）*/
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
        }
        .blueBtn{
            background: #5dcbff;
        } /*藍色按鈕*/
        .blueBtn:hover{
            background: #40b6ee;
        }
        .orangeBtn{
            background: #ff5700;
        }/*橙色按鈕*/
        .orangeBtn:hover{
            background: #e25d18;
        }
        .violetBtn{
            background: #6680ff;
        }/*紫色按鈕*/
        .violetBtn:hover{
            background: #425de0;
        }
        .grayBtn{
            background: #999;
        }/*灰色按鈕*/
        .grayBtn:hover{
            background: #7f7f7f;
        }
    </style>
</head>
<body>
<div class="container">
    <span class="btn blueBtn">藍色按鈕</span>
    <span class="btn orangeBtn">橙色按鈕</span>
    <span class="btn violetBtn">紫色按鈕</span>
    <span class="btn grayBtn">灰色按鈕</span>
</div>
</body>
</html>

同理可應用在超鏈接、按鈕等中

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

vue實現商品購物車全選與全不選項目實戰

項目需求：實現一個購物車全選框實現對商家和商品的全選商家全選框實現對當前商家所有商品的全選取消其中一個商品則取消對應商家全選和全選框選中一個商家下的所有商品則勾選對應商家的全選框，不勾選全選框選中所有商品則勾選所有商家全選框和全選框我的思路： 1、通過對數據的簡單操作可實現更深層次的全 ...
vue 構建項目遇到的請求本地json問題

在本地測試的json沒有問題，但是打包後，發現json 的路徑不對了，變成了絕對路徑解決方法：建立的json文件需要放置根目錄/static下。如項目名/static/data.json，這邊打包後就不會報路徑問題了。（請用起服務的方法來打開打包後的index.html，如anywhere來打 ...
vue 構建項目遇到的問題

1、我在打包完成後，打開index.html文件發現地址並沒有攜帶路由。 config下的 index.js 中的build命令的配置有一個屬性叫assetsPublicPath，它的值為‘/’。意思是根目錄，這時會從index.html所在的硬碟的根目錄下開始查找，自然無法找到。解決辦法：改為 ...
canvas製作的煙花效果

最近感覺canvas挺有意思的，在業餘時間沒事研究了一下，參考過網上一些思路，話不多說，開始啦。 github地址：https://github.com/aWhiteBear/fireworks 演示地址：https://awhitebear.github.io/fireworks/ 圖片效果如下： ...
自定義超鏈接動畫---transition

效果圖： ...
Nodejs實現用戶註冊

1創建連接池對象 2導出連接池對象 1 /** 2 * 1.引入mysql模塊 3 * 2.創建連接池對象 4 * 3.導出連接池對象 5 */ 6 const mysql = require('mysql'); 7 var pool = mysql.createPool({ 8 host:'loc ...
留言板（初學者使用js實現）

實現輸入內容點擊請留言按鈕，就會在下方留言並且後面有刪除選項，點擊即可刪除留言。 ...
css，解決文字與圖片對齊的問題

測試代碼： ...