CSS改变超链接字体样式

绝地灬酷狼 2022-05-12 00:18 417阅读 0赞

**一 应用**

网站中会有多种超链接，当我们将鼠标移动到某一超链接上时，超链接就会以不同的字体样式显示。

例如超链接的字体样式显示为斜体、粗体、下划线、删除线或粗斜体等。

本应用将通过JavaScript代码改变超链接字体样式。

应用了字体样式中的fontWeight、fontStyle以及textDecoration属性，通过设置其属性值，改变超链接的字体样式。

**二 代码**

<script language="javascript">
    //当鼠标移动到超链接时改变指定链接的字体样式
    function onmovein(v)
    {
    	if (v=="a")
    	{
    		a.style.fontWeight = "Bold";//粗体
    	} 
    	if (v=="b")
    	{
    		b.style.fontStyle = "Italic";//斜体
    	} 
    	if (v=="c")
    	{
    		c.style.textDecoration = "underline";//下划线
    	}
    	if (v=="d")
    	{
    		d.style.textDecoration = "line-through";//删除线
    	}
    	if (v=="e")
    	{
    		e.style.fontWeight = "Bold";//粗体
    		e.style.fontStyle = "Italic";//斜体
    	}
    }
    //当鼠标移出超链接时，恢复超链接的字体样式
    function onmoveout()
    {
     a.style.fontWeight = "normal";
     b.style.fontStyle = "normal";
     c.style.textDecoration = "none";
     d.style.textDecoration = "none";
     e.style.fontStyle = "normal";
     e.style.fontWeight = "normal";
    }
    </script>
    <body vlink="#FF3300" bgcolor="#CCFFFF">
     <a href="#" name="a" onMouseMove="onmovein('a');" onMouseOut="onmoveout();">粗体文字</a> ┊
     <a href="#" name="b" onMouseMove="onmovein('b');" onMouseOut="onmoveout();">斜体文字</a> ┊ 
     <a href="#" name="c" onMouseMove="onmovein('c');" onMouseOut="onmoveout();">下划线文字</a> ┊ 
     <a href="#" name="d" onMouseMove="onmovein('d');" onMouseOut="onmoveout();"onClick="window.location.reload(); ">删除线文字</a> ┊ 
     <a href="#" name="e" onMouseMove="onmovein('e');" onMouseOut="onmoveout();">粗体和斜体</a>
    </body>

**三 运行效果**

![6cb249a1-ef16-3baa-9bfd-70222b5f10ec.png][]

[6cb249a1-ef16-3baa-9bfd-70222b5f10ec.png]: /images/20220512/e17504b5d8074a018cc016e04a1dea9d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，417人围观）

还没有评论，来说两句吧...

相关阅读

相关 css：字体、文本、超链接、列表、背景、渐变样式

目录 1、字体样式 2、文本样式 3、css超链接 4、css背景样式 5、线性渐变 -------------------- <span>标签作用：能让某

旧城等待，/ 2024年04月06日 11:39/ 0 赞/ 42 阅读

相关 CSS_超链接状态样式切换&雪碧图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

矫情吗；*/ 2023年10月06日 16:51/ 0 赞/ 15 阅读

相关 CSS字体样式值

字体样式 font-weight: 文字粗细 normal: 默认值，标准粗细 bold：粗体 bolder：更粗 lighter：更细

朱雀/ 2022年12月30日 08:15/ 0 赞/ 178 阅读

相关 css改变鼠标样式

元素的样式上加cursor:值 <table> <tbody> <tr> <th>值</th> <th>描述</th> </tr> <t

蔚落/ 2022年09月16日 04:56/ 0 赞/ 306 阅读

相关 html_css字体样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <s

Dear 丶/ 2022年06月18日 05:19/ 0 赞/ 295 阅读

相关 CSS复习之用用 CSS 设置超链接样式

今日目录 1、使用 CSS 伪类别来设置超链接样式 2、创建按钮式超链接一、使用 CSS 伪类别来设置超链接样式

待我称王封你为后i/ 2022年05月25日 10:24/ 0 赞/ 384 阅读

相关 CSS之——伪类选择器设置超链接样式和创建按钮式超链接（学习笔记）

一、使用CSS伪类别来设置超链接样式链接的四种状态： a:link 普通的，未访问的链接 a:visited: 用户已访问的链接

Love The Way You Lie/ 2022年05月19日 09:52/ 0 赞/ 498 阅读

相关 CSS改变超链接字体样式

一应用网站中会有多种超链接，当我们将鼠标移动到某一超链接上时，超链接就会以不同的字体样式显示。例如超链接的字体样式显示为斜体、粗体、下划线、删除线或粗斜体等。

绝地灬酷狼/ 2022年05月12日 00:18/ 0 赞/ 418 阅读

相关 CSS链接样式设置

<a herf= ""> 这是第一个链接</a> <a herf= ""> 这是第二个链接</a> a\{ color: yellow; \}

朱雀/ 2022年04月03日 12:18/ 0 赞/ 381 阅读

相关 CSS字体样式

样式一： 1. `body {` 2. `margin: 0;` 3. `padding: 0;` 4. `line-height: 1.

分手后的思念是犯贱/ 2022年02月18日 08:41/ 0 赞/ 383 阅读