大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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实现每个按钮不同颜色。

效果:

源码:


文章标题:css鼠标悬停按钮样式,css鼠标悬停背景颜色变化
本文链接:http://dzwzjz.com/article/hospdo.html
在线咨询
服务热线
服务热线:028-86922220
TOP