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

番茄西紅柿發布于2019-04-23 11:41 / 3721人閱讀

摘要：實例代碼實現漸變時間變化效果藍色按鈕橙色按鈕紫色按鈕灰色按鈕藍色按鈕橙色按鈕紫色按鈕灰色按鈕同理可應用在超鏈接按鈕等中

實例代碼：

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>

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

GPU云服務器云服務器鼠標懸停 js鼠標懸停鼠標懸停事件html html鼠標懸停下拉

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1008.html

CSS選擇器

摘要：子選擇器用兩個常用選擇器，中間通過進行選擇。注意不要和子選擇器選擇對象范圍混淆例如測試子選擇器第一個標簽第二個標簽父元素的后代中的所有元素的字體都會被設置成紅色。通配選擇器通用選擇器用來表示選擇作用于所有元素。 CSS選擇器（Selectors ）一、CSS選擇器作用CSS選擇器可用于實現對HTML網頁上的元素樣式的一對一，一對多或者多對一的控制。二、CSS選擇器的種類（這里介紹常用...

Juven 2019-08-30 12:50 評論0 收藏0
CSS學習筆記(九) 界面組件之導航菜單

摘要：為了讓包圍列表項，沒有使用，而是使用了，是因為前者會導致后來添加到下拉菜單中的子菜單無法顯示它們最終會顯示在父元素的外面，結果會導致溢出而被隱藏。它與父元素之間的間隙，實際上下拉菜單中第一個鏈接的邊框。菜單由一組鏈接組成。用 HTML 中的列表元素（ul 或 ol）來分組鏈接不僅符合邏輯，而且即使沒有額外的 CSS 也能適當顯示鏈接的層次。默認情況下，由于列表（li）是塊級元素...

pingink 2019-08-28 18:03 評論0 收藏0
送給CSS初學者的懸停過渡動畫三部曲

摘要：最后，將動畫函數選為。的表現狀態就是起止過程比較緩慢，中間過渡迅速。褪色效果首先，添加一個褪色的過渡。通過百分比的方式指定動畫的進度相對于初始位置右移。同時希望動畫持續秒的時長，采用的動畫效果。 CSS不一定要寫得多么復雜才能實現特殊效果。如下就是三個超級簡單的過渡的例子，可能只是幾行代碼，但是添加到Web應用程序中，卻會讓它增色不少。showImg(https://segmentfa...

jsliang 2019-08-02 16:14 評論0 收藏0
送給CSS初學者的懸停過渡動畫三部曲

摘要：最后，將動畫函數選為。的表現狀態就是起止過程比較緩慢，中間過渡迅速。褪色效果首先，添加一個褪色的過渡。通過百分比的方式指定動畫的進度相對于初始位置右移。同時希望動畫持續秒的時長，采用的動畫效果。 CSS不一定要寫得多么復雜才能實現特殊效果。如下就是三個超級簡單的過渡的例子，可能只是幾行代碼，但是添加到Web應用程序中，卻會讓它增色不少。showImg(https://segmentfa...

leo108 2019-08-29 18:44 評論0 收藏0
前端每日實戰：126# 視頻演示如何用純 CSS 創作小球變矩形背景的按鈕懸停效果

摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbgnoQ?w=400&h=300); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehop...

U2FsdGVkX1x 2019-08-02 16:03 評論0 收藏0