a:hover默认状态。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了a:hover默认状态。相关的知识，希望对你有一定的参考价值。
有一组a标签，给他们加了同样的hover ，鼠标移上去才会触发hover，现在页面刚刚加载完成，我想让第一个a标签默认hover状态，这时候鼠标是没有移上去的。不用js能不能实现？
这是可以的，我写了个例子，希望可以帮助你。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
*padding:0; margin: 0; font-size: 12px;
ul,lilist-style: none;
bodytext-align: center;
divwidth: 100px; margin: 0 auto;
awidth: 100px; line-height: 40px; background: #eee; border-bottom:1px white solid; text-align: center; display: block;
.hoverbackground: red;
</style>
</head>
<body>
<div class="nav">
<a href="" class="hover">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
</div>
<script>
$(".nav a").mousemove(function(event)
$(this).addClass('hover').siblings().removeClass('hover');
);
</script>
</body>
</html> 参考技术A 不能，事件要触发才生效
CSSCSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )
文章目录
一、链接伪类选择器
1、语法说明
链接伪类选择器 可以 设置 链接文本 的 不同状态的样式 :
- 未访问链接样式 : 默认的样式 , 界面打开后 , 默认显示该样式 ;
a:link
- 已访问链接样式 : 点击过的链接 , 链接变成该样式 ;
a:visited
- 鼠标移动到链接样式 : 鼠标移动到 链接 上方 , 链接变成该样式 ;
a:hover
- 选定链接样式 : 按下鼠标松开时 , 变成该样式 ;
a:active
链接伪类选择器语法 :
a:link
属性名称:属性值;
a:visited
属性名称:属性值;
a:hover
属性名称:属性值;
a:active
属性名称:属性值;
2、常用方式
注意 :
- 顺序必须严格遵守 LVHA 次序 : 使用 链接伪类选择器 时 , 四种选择器必须按照上述顺序 , 如果顺序颠倒会出现错误 ;
- 实际用法 : 在实际开发时 , 一般只需要设置
a:hover鼠标经过的样式 , 其它的三种不需要设置 , 不常用 ;
常用方式 : 如果要 给 .nav 类下的 a 链接指定样式 , 则需要使用 后代选择器 + 链接伪类选择器 进行指定 ;
- a:link 链接伪类选择器 不常用 , 设置 a 标签样式 等同于 a:link 样式 效果 ;
/* a 标签选择器 同时设置的样式等同于 a:link 链接伪类选择器 */
.nav a
color: gray;
/* :hover 链接伪类选择器 鼠标经过变成红色 */
.nav a:hover
color: red;
CSS 基础选择器 :
- 标签选择器
- 类选择器
- ID 选择器
- 通配符选择器
3、代码示例
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>链接伪类选择器</title>
<base target="_blank"/>
<style>
/*未访问链接:默认的样式 , 界面打开后 , 默认显示该样式*/
a:link
color: blue;
/*已访问链接:点击过的链接*/
a:visited
color: red;
/*鼠标移动到链接:鼠标移动到 链接 上方*/
a:hover
color: purple;
/*选定链接:按下鼠标松开时*/
a:active
color: orange;
</style>
</head>
<body>
<a href="#">链接伪类选择器1</a>
<a href="#">链接伪类选择器2 参照组</a>
</body>
</html>
显示效果 :
- 默认状态 : 打开后的默认状态 , 都是蓝色 ;
- 鼠标移动到链接上 , 变成紫色 ;
- 鼠标点击 松开 , 变成橙色 ;
- 整个流程操作完毕后 , 链接都变成了 红色 , 这是因为两个链接都是 # , 一旦访问都同时变为已访问状态 ;
以上是关于a:hover默认状态。的主要内容，如果未能解决你的问题，请参考以下文章
html 一个div下有很有几个相同的css a:hover 的<a> ,当div失去焦点时，默认激活一个 hover