您的位置：首页 > Web前端 > CSS

a标签鼠标悬停效果

2017-06-15 22:42 204 查看

预备知识:

（一）在jsp中设置样式的三种方法：

1、引入外部样式

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部：

<head>

<link rel="stylesheet" type="text/css" href="文件路径/css文件"/>

</head> 

2、自定义内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表。

<head>

<style type="text/css">

样式

</style>

</head>

3、在元素标签内直接指定样式，内联样式

当样式仅需要在一个元素上应用一次时, 要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法

<div style="width:100px"></div>

注意：内联样式的优先级最高，其次是内部样式，外部样式的优先级是最低的。

（二）CSS样式编辑

1.CSS参考手册
CSS属性：http://www.w3school.com.cn/cssref/index.asp
几个常用style属性：
background
在一个声明中设置所有的背景属性。
background-color
设置元素的背景颜色
border
在一个声明中设置所有的边框属性
height
设置元素高度。
width 设置元素的宽度。
font 在一个声明中设置所有字体属性。
font-size
规定文本的字体尺寸。
margin
在一个声明中设置所有外边距属性
padding
在一个声明中设置所有内边距属性。
color 设置文本的颜色。 
text-align
规定文本的水平对齐方式。
text-decoration规定添加到文本的装饰效果。

2.CSS选择器参考手册
1）CSS .class 选择器
选择并设置 class="intro" 的元素的样式：
.intro
{ 
background-color:yellow;
}
2）CSS #id 选择器
为 id="firstname" 的元素设置样式：
#firstname
{ 
background-color:yellow;
}
3）CSS * 选择器
选择所有元素，并设置它们的背景色：
*
{ 
background-color:yellow;
}
4）CSS element 选择器（元素选择器）
选择并设置所有 <p> 元素的样式：
p
{ 
background-color:yellow;
}
5）CSS element,element 选择器（选择器分组）
选择并设置所有 <h1> 样式和所有 <p> 元素的样式：
h1,p
{ 
background-color:yellow;
}
6）CSS element element 选择器（后代选择器）
选择并设置位于 <div> 元素内部的每个 <p> 元素的样式：
div p
{ 
background-color:yellow;
}
7）CSS element>element 选择器（子元素选择器）
选取父元素是 <div> 元素的每个 <p> 元素，并设置其背景色：
div>p
{ 
background-color:yellow;
}
8）CSS element+element 选择器（相邻兄弟选择器）
选择 <div> 元素之后紧跟的每个 <p> 元素，并设置其背景色：
div+p
{ 
background-color:yellow;
}
9）CSS [attribute] 选择器（属性选择器）
为带有 target 属性的 <a>
4000
; 元素设置样式：
a[target]
{ 
background-color:yellow;
}
10）CSS [attribute=value] 选择器
为 target="_blank" 的 <a> 元素设置样式：
a[target=_blank]
{ 
background-color:yellow;
}
11）CSS [attribute~=value] 选择器
选择 titile 属性包含单词 "flower" 的元素，并设置其样式：
[title~=flower]
{ 
background-color:yellow;
}
12）CSS [attribute|=value] 选择器
选择 lang 属性值以 "en" 开头的元素，并设置其样式：
[lang|=en]
{ 
background-color:yellow;
}
13）CSS3 element1~element2 选择器
为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景：
p~ul
{
background:#ff0000;
}
14）CSS3 [attribute^=value] 选择器
设置 class 属性值以 "test" 开头的所有 div 元素的背景色：
div[class^="test"]
{
background:#ffff00;
}
15）CSS3 [attribute$=value] 选择器
设置 class 属性值以 "test" 结尾的所有 div 元素的背景色：
div[class$="test"]
{
background:#ffff00;
}
16）CSS3 [attribute*=value] 选择器
设置 class 属性值包含 "test" 的所有 div 元素的背景色：
div[class*="test"]
{
background:#ffff00;
}
17）CSS :hover 选择器
选择鼠标指针浮动在其上的元素，并设置其样式：
a:hover
{ 
background-color:yellow;
}
...

开始动手：

1.定义a标签，内联样式style="text-decoration:none;"（取消a标签的下划线）：

<a href="javascript:auditUnit()" style="text-decoration:none;" class="aTagHoverFontRed">被审计单位</a>

2.编写外部css文件，ledgerMasterInfo.css

/**鼠标指针浮动在a标签，其上的元素变色**/

a[class ^= "aTagHoverFontRed"]:hover{ 
background-color:#E7EAEE;
color:red;
font-size:16px;

}

3.引入外部样式

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/ledgerDemo/css/ledgerMasterInfo.css"/>

测试：当鼠标移到a标签上时，a标签背景颜色改变，字体变为红色，字体大小为16px。鼠标移除后恢复。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css
相关文章推荐
新的分享
章节导航