专栏首页艺述思维9.25【前端开发】超链接伪类:如何在svg元素上使用超链接伪类?

9.25【前端开发】超链接伪类:如何在svg元素上使用超链接伪类?

超链接伪类:如何在svg元素上使用超链接伪类?

a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}

a:visited 单击访问后超链接样式 a:visited {color:#333;}

a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}

a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}

注意定义的顺序LVHA

这个样式可能会被后声明的其他链接相关的伪类覆盖,这些伪类包括 (:link, :hover,和:active)。要适当地设置链接样式,请将:visited 规则放在:link 规则之后,但在:hover 和:active 规则之前。

参照 LVHA 顺序::link — :visited — :hover — :active。

链接,访问过,悬停,激活(按下的)。

注意先写默认样式

    <style>
        a {
            background-color: white;
            border: 1px solid white;
        }
        a:visited {
            background-color: yellow;
            border-color: hotpink;
            color: hotpink;
        }
</style>
    <a href="#test-visited-link">链接1</a>
    <a href="">空链接2</a>

样式限制

并不是只能给a链接加这几个伪类,可以给所有元素添加。但并不是所有的样式可用,只有少量可用

允许使用的 CSS 属性为color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, 和outline-color。

  • 文本颜色
  • 背景色
  • 边框色

允许使用的 SVG 属性为fill 和 stroke。

在svg上使用超连接伪类

    <h2>使用svg</h2>
    <svg width="200" height="200">
        <defs>
            <style type="text/css">
                #rect1 {
                    stroke: black;
                    fill: red;
                }


                #rect1:hover {
                    stroke: black;
                    fill: rgb(101, 31, 192);
                }


                #rect1:active {
                    stroke: black;
                    fill: rgb(109, 84, 98);
                }
</style>
        </defs>
        <rect x="10" height="50" y="10" width="50" id="rect1" />
    </svg

alpha样式将受限

允许使用的样式的 αlpha 分量(透明度)将被忽略。设置在:visited中的样式将使用元素的非:visited 访问状态的 αlpha 分量, 如果该分量为0,这个样式将被完全忽略。

本文分享自微信公众号 - 用故事讲技术(ygsjjs),作者:LIYI

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-09-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 9.29【前端开发】超链接伪类:如何在svg元素上使用超链接伪类?

    这个样式可能会被后声明的其他链接相关的伪类覆盖,这些伪类包括 (:link, :hover,和:active)。要适当地设置链接样式,请将:visited 规则...

    李艺
  • 10.6 border-color简写属性:如何理解四值语法?

    border-color 是一个用于设置元素四个边框颜色的快捷,或者说是简写属性:border-top-color, border-right-color, b...

    李艺
  • 梳理 50 年人机交互界面发展史,得出这个规律,开发框架的选择不再迷茫

    框架的英文是 Framework,与之经常并提的另一个词汇是 Library。两者的区别有哪些?

    李艺
  • python3的字符串格式化

    '{name},{age}'.format(age=28,name='jack')

    py3study
  • XML/HTML/JSON——数据抓取过程中不得不知的几个概念

    之前写了很多网络数据数据抓取的案例,无论是关于R语言还是Python的,里面大量使用xml\html\css\ajax\json等这些概念,可是一直没有对这些概...

    数据小磨坊
  • 盘点将改变世界的12大科技技术,你说它们黑不黑?

    随着现代科学技术的迅猛发展,下一代科技产品将与我们现在使用的产品大相径庭。而且,通过微软、谷歌、IBM等大公司目前正在殚精竭虑研制的新技术,我们也能管窥未来科技...

    机器人网
  • 直播预告丨明天下午3点,她们竟然来直播了!!!

    ? 她来了 她来了 她们带着美丽和才华来了! 腾讯云通信直播首秀! 产品&运营小姐姐 正(bei)式(po)营业! 领导说 先定个小目标 带货一个亿就好 ...

    腾讯即时通信IM
  • Net作业调度(四)—quartz.net持久化和集群

    蘑菇先生
  • 五种高效自学方法 | 用学霸的思维建立系统的知识体系

    用户1756920
  • vue封装Swiper实现图片轮播

    (1) Swiper是纯Javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

    赵帆同学GXUZF.COM

扫码关注云+社区

领取腾讯云代金券