css鼠标悬停按钮样式,css鼠标悬停背景颜色变化

CSS中的a:hover表示什么

a：hover表示当鼠标选定在a标签上时a标签的样式变化。

创新互联专注骨干网络服务器租用10余年，服务更有保障！服务器租用，德阳服务器托管 成都服务器租用，成都服务器托管，骨干网络带宽，享受低延迟，高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。

这是css中伪类的使用格式。

伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class { property: value; }，简单地用一个半角英文冒号（:）来隔开选择符和伪类。CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类：

:link用在未访问的连接上。

:visited用在已经访问过的连接上。

:active用于获得焦点（比如，被点击）的连接上。

:hover 用于鼠标光标置于其上的连接。

扩展资料：

css的语言特点：

1、多页面应用

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

2、层叠

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

3、页面压缩

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。

参考资料：百度百科——伪类

百度百科——css

在CSS中如何设置一个按钮鼠标划过变颜色。

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的style标签中，输入css代码：button {background-color: #00a7d0}

button:hover {background-color: #ff7701}。

3、浏览器运行index.html页面，此时显示出了蓝色背景颜色的按钮。

4、将鼠标移入按钮，此时按钮的背景颜色变成了橙色。

HTML+CSS制作鼠标悬停效果

!DOCTYPE html

html

head

meta charset="UTF-8"

title鼠标悬停效果/title

style type="text/css"

    *{

        margin: 0;

        padding: 0;

    }

    body{

        background-color: #000;

    }

    a{

        width: 200px;

        height: 50px;

        display: block;

        text-align: center;

        line-height: 50px;

        text-decoration: none;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%,-50%);

        font-size: 24px;

        font-weight: bold;

        color: white;

        border: 1px solid white;

        overflow: hidden;

    }

    a::before{

        content: "";

        position: absolute;

        top: 0;

        left: -100%;

        width: 100%;

        height: 100%;

        background-image: linear-gradient(60deg,transparent,rgba(146,148,248,.4),transparent);

        transition: all 0.5s;

    }

    a:hover::before{

        left: 100%;

    }

    a:hover{

        box-shadow: 0 2px 10px 8px rgba(146,148,248,.4);

    }

/style

/head

body

a href="#"鼠标悬停效果/a

/body

/html

CSS+HTML悬停下划线效果

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

meta name="viewport" content="width=device-width, initial-scale=1.0"

meta http-equiv="X-UA-Compatible" content="ie=edge"

titleDocument/title

style

    body {

        display: flex;

        height: 100vh;

        justify-content: center;

        align-items: center;

    }

    ul {

        padding: 0;

        margin: 0;

        list-style-type: none;

    }

    ul li{

        padding: 5px 0;

    }

    ul li a {

        position: relative;

        display: inline-block;

        text-decoration: none;

        color: #3a3a3a;

        /* 转大写 */

        text-transform: uppercase;

        padding: 4px 0;

        transition: 0.5s;

        font-weight: bold;

    }

    ul li a::after {

        position: absolute;

        content: "";

        width: 100%;

        height: 3px;

        top: 100%;

        left: 0;

        background: #347cdb;

        transition: transform 0.5s;

        transform: scaleX(0);

        transform-origin: right;

    }

    ul li a:hover {

        color: #585858;

        text-shadow: 0 0 10px #ccc;

    }

    ul li a:hover::after {

        transform: scaleX(1);

        transform-origin: left;

    }

/style

/head

body

ul

    lia href="#"home/a/li

    lia href="#"archives/a/li

    lia href="#"tags/a/li

    lia href="#"categories/a/li

    lia href="#"about/a/li

/ul

/body

/html

HTML5+CSS3小实例：鼠标悬停发光按钮

HTML5+CSS3做一组鼠标悬停发光的按钮，鼠标悬停，按钮边框延展开来，首尾相连时填充按钮，过程伴随发光、倒影效果，并通过hue-rotate实现每个按钮不同颜色。

效果：

源码：