鼠标悬停，背景颜色变化问题

番茄西红柿发布于2019-04-23 11:41 / 3698人阅读

摘要：实例代码实现渐变时间变化效果蓝色按钮橙色按钮紫色按钮灰色按钮蓝色按钮橙色按钮紫色按钮灰色按钮同理可应用在超链接按钮等中

实例代码：

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鼠标悬停下拉

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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 创作小球变矩形背景的按钮悬停效果

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbgnoQ?w=400&h=300); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehop...

U2FsdGVkX1x 2019-08-02 16:03 评论0 收藏0