鼠標(biāo)懸停，背景顏色變化問題

番茄西紅柿發(fā)布于2019-04-23 11:41 / 3782人閱讀

摘要：實(shí)例代碼實(shí)現(xiàn)漸變時(shí)間變化效果藍(lán)色按鈕橙色按鈕紫色按鈕灰色按鈕藍(lán)色按鈕橙色按鈕紫色按鈕灰色按鈕同理可應(yīng)用在超鏈接按鈕等中

實(shí)例代碼：

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;
            /*實(shí)現(xiàn)漸變（時(shí)間變化效果）*/
            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;
        }
        .blueBtn{
            background: #5dcbff;
        } /*藍(lán)色按鈕*/
        .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">藍(lán)色按鈕span>
    <span class="btn orangeBtn">橙色按鈕span>
    <span class="btn violetBtn">紫色按鈕span>
    <span class="btn grayBtn">灰色按鈕span>
div>
body>
html>

同理可應(yīng)用在超鏈接、按鈕等中

云服務(wù)器 GPU云服務(wù)器鼠標(biāo)懸停 js鼠標(biāo)懸停鼠標(biāo)懸停事件html html鼠標(biāo)懸停下拉

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1008.html

相關(guān)文章

CSS選擇器

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

Juven 2019-08-30 12:50 評(píng)論0 收藏0
CSS學(xué)習(xí)筆記(九) 界面組件之導(dǎo)航菜單

摘要：為了讓包圍列表項(xiàng)，沒有使用，而是使用了，是因?yàn)榍罢邥?huì)導(dǎo)致后來添加到下拉菜單中的子菜單無法顯示它們最終會(huì)顯示在父元素的外面，結(jié)果會(huì)導(dǎo)致溢出而被隱藏。它與父元素之間的間隙，實(shí)際上下拉菜單中第一個(gè)鏈接的邊框。菜單由一組鏈接組成。用 HTML 中的列表元素（ul 或 ol）來分組鏈接不僅符合邏輯，而且即使沒有額外的 CSS 也能適當(dāng)顯示鏈接的層次。默認(rèn)情況下，由于列表（li）是塊級(jí)元素...

pingink 2019-08-28 18:03 評(píng)論0 收藏0
送給CSS初學(xué)者的懸停過渡動(dòng)畫三部曲

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

jsliang 2019-08-02 16:14 評(píng)論0 收藏0
送給CSS初學(xué)者的懸停過渡動(dòng)畫三部曲

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

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

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

U2FsdGVkX1x 2019-08-02 16:03 評(píng)論0 收藏0