一 应用
网站中会有多种超链接，当我们将鼠标移动到某一超链接上时，超链接就会以不同的字体样式显示。
例如超链接的字体样式显示为斜体、粗体、下划线、删除线或粗斜体等。
本应用将通过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>
三 运行效果
相关推荐
在这个场景中，我们需要使用CSS来改变超链接的属性，从而实现特定的视觉效果和交互体验。 首先，我们要了解超链接的基本结构。在HTML中，`<a>`标签用于创建超链接，其`href`属性定义了链接的目标URL。例如，将...
在这里，我们将利用CSS为超链接定义基础样式，并通过jQuery来控制这些样式的动态变化，实现淡入效果。 要实现淡入效果，我们需要设置超链接的初始透明度。在CSS中，我们可以使用`opacity`属性来控制元素的透明度，...
在CSS（层叠样式表）中，`<a>`元素用于创建超链接，它能够将文本或图像与其他网页、文件或页面内的位置关联起来。在设计网页时，我们经常需要自定义这些超链接的外观，使其符合整体设计风格。这里我们将深入探讨CSS...
在处理超链接的样式时，CSS提供了一种高效的方法，即使用伪类选择器。这些伪类选择器使得我们可以分别控制超链接在不同状态下的样式，包括未被访问、已访问、鼠标悬停以及被激活的状态。 1. **:link** - 该伪类用于...
在CSS（层叠样式表）中，定义超链接的四种状态是至关重要的，因为它们决定了链接在不同条件下的视觉表现。这四个状态分别是link、visited、hover和active，通常用缩写L-V-H-A来表示。理解并正确使用这些状态可以确保...
CSS3的transition属性允许我们平滑地改变一个或多个CSS属性，当元素的状态发生变化，如鼠标悬停（hover），过渡效果就会自动播放，为用户创造出动态的视觉体验。21种不同的动画效果都是通过巧妙地设置transition的...
通过`:link`，我们可以将超链接的颜色、字体样式等属性修改为符合页面设计需求的样式。 `:visited`伪类用于定义用户已经访问过的链接的样式。出于隐私考虑，浏览器默认情况下限制了使用`:visited`伪类可设置的样式...
它的主要功能是让网页设计者能够在同一个页面上应用多种不同的样式，比如改变超链接的外观、调整字体样式等。通过CSS，只需修改一个文件，就能影响到数百个网页的设计，极大地提高了工作效率，并且能够实现个性化...
6. `fonts`文件夹：可能存储自定义字体文件，用于提供独特的文本样式。 通过学习和研究这个项目，开发者不仅可以了解到如何结合SVG和CSS3创建出富有创意的超链接动画，还可以深入理解这两个技术在实际应用中的潜力...
CSS3的动画和过渡可以用来改变元素在特定时间内的样式，为用户界面增添活力。 在这款特效中，我们主要利用jQuery来监听鼠标悬停事件，并触发相应的CSS3动画。CSS3的动画可以通过`@keyframes`规则定义，它允许我们...
3. **CSS样式更改**：在事件触发时，JavaScript会修改超链接的CSS样式。这包括改变`width`（宽度）、`height`（高度）、`font-size`（字体大小）、`background-color`（背景色）等。可以使用`style`对象直接修改元素...
在Dreamweaver CS6中，通过CSS定义链接样式可以让网页中的超链接拥有独特的视觉效果，提升用户体验。下面我们将详细讨论如何在Dreamweaver CS6中使用CSS定义链接的四种伪类状态，并了解如何定义局部链接样式。 1. ...
这包括去除边框、背景色，以及调整字体样式。 ```css .link-button { background-color: transparent; border: none; color: inherit; cursor: pointer; text-decoration: underline; outline: none; } ``` ...
本篇将深入探讨标题提及的“CSS样式文件设置网页中的页面元素”以及在描述中提到的“超链接样式”和“表格样式”。 1. **CSS样式文件**： CSS样式文件通常以`.css`为扩展名，它包含了针对HTML或XML文档中各个元素...
**CSS:A标记样式详解** 在Web开发中，CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。A标记，即`<a>`标签，是HTML中的超链接元素，用于创建链接到...
该资源涵盖了CSS概述、CSS的组成、在HTML中使用CSS的方法、CSS取值与单位、CSS字体、CSS文本、CSS背景、CSS框模型、CSS超链接和设置光标属性、CSS列表、CSS定位等内容。 知识点： 1. CSS概述：CSS（Cascading ...
1. **伪类与伪元素**：`:hover`, `:active`, `:focus`等伪类可改变元素在特定状态下的样式，`::before` 和 `::after`伪元素则能在元素前后插入内容。 2. **CSS动画**：`@keyframes`规则允许创建自定义动画，`...
本章主要探讨如何使用CSS3来美化网页元素，包括字体样式、文本样式、超链接样式、列表样式、背景样式以及渐变效果。下面我们将深入讲解这些知识点。 首先，我们来看CSS中用于突出文本的标签和属性。`<span>`标签常...
要实现这一目标，可以通过CSS（层叠样式表）来控制超链接的显示样式。CSS为开发者提供了一系列的伪类选择器来针对链接的不同状态进行样式设置，包括未访问的链接（:link）、鼠标悬停的链接（:hover）、正在被点击的...