CSS样式鼠标点击与经过的效果一样

点击之后为选中状态,就像现在在百度知道这个网页,“知道”是黑色的,当你点击新闻之后,新闻是黑色的,有经验的帮帮忙,谢谢。... 点击之后为选中状态,就像现在在百度知道这个网页,“知道”是黑色的,当你点击新闻之后,新闻是黑色的, 有经验的帮帮忙,谢谢。 展开
 我来答
肥仙女a
高粉答主

2020-04-12 · 我是游戏小达人,专注于分享游戏资讯。
肥仙女a
采纳数:477 获赞数:115593

向TA提问 私信TA
展开全部

1、新建一个HTML文件,文件名为test.html,title标题为"CSS实现鼠标经过导航的超链接时显示下划线效果"。

2、在页面编写nav标签,在里面放三个超链接(首页、栏目一、栏目二),代码如下:

3、运行代码,效果如下:

4、使用css对导航的字体的字体大小、颜色、排列方式等进行美化,代码如下:

5、运行代码,效果如下:可见,经过CSS样式美化,鼠标经过的时候,显示蓝色。

6、利用CSS编写代码,实现鼠标经过时显示下划线效果,代码如下:

7、在浏览器运行代码,实现了想要的效果。

朋友火箭9K
推荐于2017-09-17 · TA获得超过2823个赞
知道大有可为答主
回答量:4676
采纳率:0%
帮助的人:3477万
展开全部
a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 当有鼠标悬停在链接上 */
a:active /* 被选择的链接 */

a,a:visited,a:hover,a:active { /*全部状态都一样的效果*/
text-decoration: none; /*没有下划线*/
color: blue; /*一直都蓝色*/
font-weight: bold; /*加粗*/
}
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
程豆豆5A
推荐于2017-10-14 · 知道合伙人互联网行家
程豆豆5A
知道合伙人互联网行家
采纳数:153 获赞数:524
从事web前端俞6年,经验丰富,喜欢帮助别人,同时也在提高自己

向TA提问 私信TA
展开全部
a标签的伪类样式有四种状态,要注意顺序,切记!
  :link 有链接属性时
:visited 链接地址已被访问过
:active 被用户激活(在鼠标点击与释放之间发生的事件)
:hover 其鼠标悬停
关于这四个伪类的排列次序,很多地方都能查到,可是为什么这么排列?从来没有见过有人提及。这里我就从技术、用户体验、优先级几个角度简单的阐述下我们为什么这么排列。

首先从技术层面上,

a的这四个伪类,分别表示了a的四种状态,要注意的是,a可以只具有一种状态(:link),或者同时具有2种或者三种状态!比如说,任何一个有HREF属性的a标签,在未有任何操作时都已经具备了:link的条件,也就是满足了有链接属性这个条件;如果访问过的a标签,同时会具备 :link :visited 两种状态。把鼠标移到访问过的a标签上的时候,a标签就同时具备了 :link :visited :hover三种状态。

其次从用户体验的角度,

在用户使用超链接的时候,为了最佳的用户体验,要做到下面几点:
第一:不管是否是被访问过的超链接,只要我鼠标移上的时候(:hover)都要有写变化,比如变色、加下划线等等,告诉用户选中的是可以点击的超链接。
第二:不管是否访问过,在a标签被激活时(:active),都应该有相同的样式变化。也就是说,同一个a标签,未访问过时在被用户激活和被访问时再被用户激活时要有相同的样式。这个也很好理解,用户点下同一个超链接时的效果不应该有差别。
第三:访问过的a标签可能要跟没有访问过的a相区分。

从CSS优先级角度,

前面的文章讲过具体的css优先级,这里我要说的是对于同一优先级的相冲突样式,浏览器的选择问题。比如:
.test {color:red; color:green;}
或者:
.test {color:red;}
.test {color:green;}
上面两个例子中,大家都知道,对于这个.test指向的内容,浏览器会显示后一个属性设置。也就是color:green.

说到这里,很多人可能已经有头绪了。结合上面的三点,不难分析我们为什么要这么排。

第一:不管什么情况下鼠标悬停都应该有一个样式变化(:hover),我们就把hover放在最后,防止具备其他状态时,被其他状态的设置覆盖掉。
第二:当a被激活时(:active),我们要求不管是否访问过,都应该有相同的样式,也就是这个状态的效果应该能够覆盖未被访问时(:link)与 已访问过(:visited)两种状态。应该放在 :link :hover的后面。
第三:被访问过的a(:visited)可能会有不一样的样式属性,用来区别a是否被访问过。也就是说:visited 状态的属性可以覆盖掉:link状态的属性, 即 :visited 要放在 :link 的后面。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
心戀米兰
2010-07-08 · TA获得超过433个赞
知道小有建树答主
回答量:279
采纳率:100%
帮助的人:282万
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
.nav{ width:800px; height:30px; line-height:30px; background:#FC9; margin:0 auto; text-align:center;}
.nav a{ display:block; width:100px; float:left; color:#000; text-decoration:none;}
.nav a:hover{ color:red; text-decoration:underline; background:#369; }
</style>
</head>

<body>
<div class="nav">
<a href="#">体育</a><a href="#">科学</a><a href="#">教育</a><a href="#">娱乐</a><a href="#">体育</a><a href="#">科学</a><a href="#">教育</a><a href="#">娱乐</a>
</div>
</body>
</html>

只要用a:hover就可以了。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式