首页 web前端 css教程 css鼠标悬停变色:超链接字体随鼠标悬停颜色改变实现

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

Nov 22, 2018 pm 05:30 PM
变色 改变


本篇文章给大家带来的内容是关于css鼠标悬停变色:超链接字体随鼠标悬停颜色改变实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

css设置超链接鼠标悬停字体上时字体变颜色,css设置鼠标悬停变色布局。

鼠标悬停字体上文字变色,通常针对超链接锚文本字体颜色改变,使用了伪类:hover。

a{ color:#00F}
a:hover{ color:#F00}
登录后复制

解释:默认超链接字体颜色为蓝色“color:#00F”,鼠标悬停时字体颜色为红色“ color:#F00”。可见要改变鼠标悬停颜色就设置a:hover

1、div css实例代码

<!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}/* 默认超链接字体悬停时颜色为红色 */
.zhiding a{ color:#090}
.zhiding a:hover{ color:#F0F}
</style>
</head>
<body>
<p>欢迎来到<a href="http://www.php.cn/">php</a>学习php技术!</p>
<p class="zhiding">指定对象<a href="#">超链接</a>字体悬停颜色改变!</p>
</body>
</html>
登录后复制

效果如下:

24.png

说明:

1)、设置默认网页超链接字体为蓝色,鼠标悬停时是红色(a{ color:#00F} a:hover{color:#F00});

2)、同时设置指定对象内超链接字体默认为绿色,鼠标悬停时字体颜色为粉红色。

3、总结

css鼠标悬停变色应用超链接伪类“:hover”设置css样式改变,除了颜色改变,还可以定义鼠标悬停字体大小、字体加粗、背景等样式改变,作为字体颜色改变灵活运用设置其它CSS样式。

以上就是对css鼠标悬停变色:超链接字体随鼠标悬停颜色改变实现的全部介绍,如果您想了解更多有关CSS3教程,请关注PHP中文网。



以上是css鼠标悬停变色:超链接字体随鼠标悬停颜色改变实现的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

win10切换黑白模式的键盘快捷键是什么 win10切换黑白模式的键盘快捷键是什么 Jan 10, 2024 pm 01:26 PM

微软公司推出的win10系统相较于之前的版本新增了许多功能,比如可以通过颜色筛选器,也就是颜色滤镜快捷方式使win10整体的显示变成黑白两色。有的小伙伴可能还不知道这种效果要怎么设置才能实现。那么现在就让小编来告诉你吧。希望可以帮助到你~win10变黑白的快捷键是什么解决方法1.可以使用快捷方式++开启或者关闭颜色滤镜2.如果想要彻底关闭颜色滤镜,可以在任务栏右击开始徽标,在弹出菜单选择选项3.在打开的界面选择选项4.在打开的左侧轻松使用栏选择选项5.在打开页面右侧的颜色滤镜界面我们会看到有一个

美团外卖商家版起送价怎么改 美团外卖商家版起送价怎么改 Mar 27, 2024 pm 07:20 PM

在美团外卖商家版的运营过程中,起送价的设置是一个至关重要的环节。合理的起送价不仅能够帮助商家控制成本,还能在一定程度上提升订单金额,从而增加整体收益。然而,很多商家对于如何修改起送价并不十分了解。那么在下文中本站小编就将为各位商家们带来详细的起送价设置攻略,想要了解的话就快来下文中一探究竟吧!在美团外卖商家中心,通过登录后进入店铺设置,然后选择门店管理,在门店管理页面顶部的切换导航中,选中配送信息,接着点击新增配送区域即可完成操作。在您添加地点后,系统将自动显示相应的配送费用。完成订单后,您将获

Win7电脑如何改变边框颜色 Win7电脑如何改变边框颜色 Jul 17, 2023 am 08:53 AM

Win7系统可以说是最常用的计算机系统之一,但最近一些使用Win7系统的朋友想要改变他们的框架颜色,但不知道Win7计算机如何改变框架颜色,下面和小边看看Win7计算机改变框架颜色的方法。Win7电脑如何改变边框颜色1.在弹出菜单栏中选择右键桌面的空白区域【个性化】;2.进入个性化界面,点击主题下方的窗口颜色;3.我们可以看到windows为我们设置了几种窗口颜色。双击我们想要应用的颜色,我们可以看到窗口和任务栏的颜色设置成功;4.点击颜色下方的浓度选项,可以增加或减少窗口颜色的浓度。浓度越重;

win11怎么改图标大小 win11怎么改图标大小 Jul 04, 2023 pm 03:57 PM

win11怎么改图标大小?win11是一个非常好用的电脑操作系统版本,它占据了如今世面上电脑操作系统的半壁江山,很多小伙伴们也发现这个版本的windows系统拥有非常多的功能,有些小伙伴们就提问了,说自己有时会看不清桌面上的图标显示,如何将它的大小进行设置更改呢?那么小编今天就以下面这篇文章为大家解读以下这个问题,感兴趣的同学可以往下看!win11图标大小调整方法步骤鼠标按住用“ctrl”键配合调整1、桌面图标太大了。2、win11图标大小怎么调节?首先按住键盘左下角的“ctrl”。3、鼠标滚轮

使用jQuery控制元素的可见性 使用jQuery控制元素的可见性 Feb 20, 2024 am 10:25 AM

标题:利用jQuery改变元素的display属性在网页开发中,经常会遇到需要根据用户操作或页面状态来动态改变元素的显示与隐藏。而利用jQuery来操作元素的display属性是一种常见且便捷的方法。在本文中,我们将介绍如何利用jQuery来改变元素的display属性,并提供具体的代码示例。首先,我们需要引入jQuery库文件。在HTML文件中通过以下代码

win10录制如何改变保存位置 win10录制如何改变保存位置 Jul 22, 2023 pm 08:05 PM

假如在录制完视频之后,在第一时间找不到录制的视频,那么改变保存位置,win10录屏是如何改变保存位置的?怎样改变win10录制视频的保存路径。跟随小编一起看吧。1.进入本地视频文件夹,右键单击“属性”。点击"地点"。3.点击移动按钮。4.将任何文件夹选为新保存的文件夹。5.点击Yes可修改保存的文件夹。

win7怎么把默认c盘改到d盘win7怎么把默认c盘改到d盘方式详细介绍 win7怎么把默认c盘改到d盘win7怎么把默认c盘改到d盘方式详细介绍 Jul 12, 2023 pm 07:09 PM

c盘是用户们默认的C盘,用户在激活电脑以后就会见到C盘中是默认的C盘,用户们的系统软件重要文件都是在这一盘里,因而假如用户一不小心删除了一些重要文件或是装上一些app在c盘内就会较为不便,因而win7怎么把默认c盘改到d盘呢,接下来就告诉大家有关win7怎么把默认c盘改到d盘方式详细介绍。win7怎么把默认c盘改到d盘1、最先在我的电脑上开启d盘;2、在d盘建立储放文件路径;3、“win+r”组合键开启运作栏,键入“regedit”开启注册表编辑器;4、在上边拷贝电子计算机途径“\HKEY_LO

CSS3的新特性一览:如何使用CSS3改变网页布局 CSS3的新特性一览:如何使用CSS3改变网页布局 Sep 10, 2023 pm 02:39 PM

CSS3的新特性一览:如何使用CSS3改变网页布局近年来,随着互联网技术的发展,越来越多的人开始创建自己的网页。而作为网页设计的重要部分,布局设计直接影响着网页的整体效果和用户体验。CSS3作为层叠样式表的最新版本,引入了许多新的特性,可以帮助我们更好地改变网页的布局。本文将会一一介绍这些新特性,并且通过案例演示如何使用CSS3改变网页布局。一、盒子模型和布

See all articles