CSS a:hover 设置鼠标悬停链接样式

a:hover

a:hover伪类选择器可以匹配选择鼠标悬停的链接,并以此来设置该链接的相关样式,常用于提示用户当前内容是一个链接,可以点击打开,是网页与用户之间的一种常见的友好的交互,比如下面这个链接,当鼠标悬停时,颜色将会改变:

这是一个链接:python全栈教程


a:hover实例代码,及在线编辑器

通过a:hover选择的链接,可以设置一些常见的样式,属性和属性值与单独设置链接a的样式差不多,比如鼠标悬停时的字体颜色、背景颜色、字体大小等等(这些样式的设置方法可在前面的章节中找到),如下实例:

<a class='ah' href='https://www.x1y1z1.com/html/html_index.html'>python全栈为什么要学习前端的HTML</a>

<style>
  .ah:hover{color:skyblue;font-size:2.5em;background-color:orange;}
</style>

实例代码解析

如上代码,之所以选择使用.ah类来作为元素选择器,而不是a,是为了不让当前的网页上的其它链接也被匹配选择到,从而改变当前网页的层叠样式设计。



全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.