css鼠标悬停变色:超链接字体随鼠标悬停颜色改变实现

css设置超链接鼠标悬停字体上时字体变颜色,css设置鼠标悬停变色布局。鼠标悬停字体上文字变色,通常针对超链接锚文本字体颜色改变,使用了伪类:hover。默认超链接字体颜色为蓝色“color:#00F”,鼠标悬停时字体颜色为红色“ color:#F00”。
可见要改变鼠标悬停颜色就设置a:hover,css鼠标悬停变色应用超链接伪类“:hover”设置css样式改变,除了颜色改变,还可以定义鼠标悬停字体大小、字体加粗、背景等样式改变,作为字体颜色改变灵活运用设置其它CSS样式。

plaintext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
                    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标悬停颜色改变实例</title>
<style> 
a{ color:#00F}/* 默认超链接字体颜色为蓝色 */
a:hover{color:#F00}/* 默认超链接字体悬停时颜色为红色 */
.seodd a{ color:#090}
.seodd a:hover{ color:#F0F}
</style>
</head>
<body>
<p>css鼠标悬停变色<a href="http://www.chateach.com/"></a>潘某人seo</p>
<p class="seodd">自定义变色,字体悬停颜色改变!</p>
</body>
</html>               
  • :hover 选择器用于选择鼠标指针浮动在上面的元素。
  • 提示::hover 选择器可用于所有元素,不只是链接。
  • 提示::link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。
  • 在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。

申明:本站内容仅代表个人观点,仅供学习参考;未经授权任何个人或组织单位不得复制、转载、摘编以及其它形式的应用!

本站文章可能使用到互联网上的资料,若对您造成困扰,请联系 kk19@foxmail.com除理

本文地址:https://www.chateach.com/it/css/842

相关文章

  • linux系统下使用Vue CLI脚手架安装vue3

    Vue CLI,vue3

    linux系统下使用Vue CLI脚手架安装vue3。Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前。端工作流提供了功能齐备的构建设置。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1603
    • Vue CLI
    • vue3
  • php如何匹配特定的汉字字母英文preg_match_all方法实现

    preg_match_all,php匹配字符串

    php如何从字符串匹配特点的内容,preg_match_all如何匹配字符串内容,数字、字符、字母,正则匹配,php正则表达式中preg_match_all函数的详解。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1157
    • preg_match_all
    • php匹配字符串
  • Vue 中使用 localStorage 详解

    localStorage,Vue

    什么是localStorage,与cookie的区别是什么,localStorage的生存期、数据结构、域名限制、浏览器支持;localStorage常用方法,存储数据setItem、读取数据getItem、修改数据、删除数据。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1447
    • localStorage
    • Vue
  • centos下修改ssh端口

    ssh端口,

    服务器如何修改默认的ssh端口,修改ssh默认端口是非常有必要的可以保证登陆的安全性。如何修改服务器的默认远程登陆端口呢,我们以centos系统为例子,linux等其它系统差不多请参照。服务器的默认ssh端口为22,不管是windows还是linux服务器都是22端口,可以方便我们在终端中通过sftp来链接服务器,尤其是linux系统,实现文件目录的可视化,可以更加方便的操作。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1302
    • ssh端口
  • php将多维数组根据某个键倒序/升序

    多维数组排序

    php将多维数组根据某个键倒序/升序,一维数组可以用一个简单的krsort() 函数进行升序排列,或者使用 arsort() 函数进行降序排列 。但是如何是多维数组那么情况就会复杂很多,没有可以直接实现多维数组按照某个键值进行排序的函数。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 2263
    • 多维数组排序
  • Java字符串的替换replace()、replaceFirst()和replaceAll()

    java,字符串

    Java字符串的替换replace()、replaceFirst()和replaceAll(),如何匹配替换字符串中的内容。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 851
    • java
    • 字符串
  • OpenSSL 拒绝服务漏洞修复教程

    OpenSSL 拒绝服务漏洞

    OpenSSL 拒绝服务漏洞修复及版本升级教程。2020年12月08日,OpenSSL官方发布安全公告,披露CVE-2020-1971 OpenSSL GENERAL_NAME_cmp 拒绝服务漏洞。EDIPARTYNAME时,由于GENERAL_NAME_cmp函数未能正确处理,从而导致空指针引用,并可能导致拒绝服务。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1176
    • OpenSSL 拒绝服务漏洞
  • JavaScript == 与 === 区别

    == 与 === 区别

    js中==和===的区别 ==和===的区别和一些比较规则: == 在比较类型不同的变量时,会进行数据类型转化,将二者转换成数据类型相同的变量,再进行比较。对于 string、number 等基础类型,== 和 === 是有区别的 a)不同类型间比较,== 之比较 "转化成同一类型后的值" 看 "值" 是否相等,=== 如果类型不同,其结果就是不等。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 941
    • == 与 === 区别
  • linux环境下安装nodejs

    nodejs安装

    linux系统下安装最新版nodejs的方法,Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1036
    • nodejs安装
  • MySQL数据库的介绍

    MySQL数据库的介绍

    MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RDBM

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1763
    • MySQL数据库的介绍
  • vue 如何监听滚动至底部

    vue触底监听

    vue如何实现触底判断,实现无限加载等功能。当我们需要实现无限加载的时候,即实现瀑布流的功能的时候,核心就是监听页面的滚动事件,当滚动触底的时候去请求加载数据,既可以实现无限加载下拉。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1474
    • vue触底监听
  • lnmp环境简介

    lnmp环境简介

    LNMP是指一组通常一起使用来运行动态网站或者服务器的自由软件名称首字母缩写。L指Linux,N指Nginx,M一般指MySQL,也可以指MariaDB,P一般指PHP,也可以指Perl或Python。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1444
    • lnmp环境简介
  • js中的数组元素的添加方法

    js数组添加元素

    js中的数组元素的添加方法,主要有三种方法,用索引元素添加、push( )方法、unshift()方法,push()方法在数组的尾部添加一个或多个元素,并返回数组新的长度,修改并替换了原始数组而非生成一个修改版的新数组。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 759
    • js数组添加元素
  • laravel下数据密码正确但还是无法连接

    laravel数据库链接

    使用laravel框架的时候,数据的密码确认是正确的但是就是无法连接成功数据库。出现这种情况往往并不是数据库的配置或者密码等参数存在问题,其实你只是少了非常关键的一步清空配置缓存。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1417
    • laravel数据库链接
  • 通过 Composer 安装laravel

    Composer ,laravel

    laravel的安装方式有很多种,推荐大家通过Composer安装laravel,下面是在linux系统中使用Composer安装laravel框架的方法。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1023
    • Composer
    • laravel
  • springboot怎么返回404页面及状态码

    springboot 404页面

    我们的项目通常来讲都是一个比较大的项目,包含了各种各样的服务。如果每个服务都以不同的方式返回异常信息,这样排查的时候就会比较凌乱。如果我们定义一个标准的异常处理体系。并在所有的服务中使用。那样开发起来就可以快速定位。页面也会更加的简单和直观。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1555
    • springboot 404页面
  • MySQL常用查询语句大全

    Mysql查询语句

    MySQL常用的查询语句大全看这里,值得收藏。MySQL数据库管理系统由瑞典的DataKonsultAB公司研发,该公司被Sun公司收购,现在Sun公司又被Oracle公司收购,因此MySQL目前属于 Oracle 旗下产品。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1036
    • Mysql查询语句
  • 解决百度UEditor富文本编辑器回车追加P标签问题

    UEditor,百度富文本编辑器,p标签

    网站的教程很多但是都比较复杂,给大家分享一个1秒可以解决百度富文本编辑器强制自动追加P标签的问题的方法。百度富UEditor富文本编辑器有一个坑就是无论你怎么修改只要你回车或者换行了就会强行追加一个P标签,会严重的影响到我们正常排版。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 2576
    • UEditor
    • 百度富文本编辑器
    • p标签