1、新建一个HTML文件，文件名为test.html，title标题为"CSS实现鼠标经过导航的超链接时显示下划线效果"。
2、在页面编写nav标签，在里面放三个超链接(首页、栏目一、栏目二)，代码如下：
3、运行代码，效果如下：
4、使用css对导航的字体的字体大小、颜色、排列方式等进行美化，代码如下：
5、运行代码，效果如下：可见，经过CSS样式美化，鼠标经过的时候，显示蓝色。
6、利用CSS编写代码，实现鼠标经过时显示下划线效果，代码如下：
7、在浏览器运行代码，实现了想要的效果。
a:visited /* 已访问的链接 */
a:hover /* 当有鼠标悬停在链接上 */
a:active /* 被选择的链接 */
a,a:visited,a:hover,a:active { /*全部状态都一样的效果*/
text-decoration: none; /*没有下划线*/
color: blue; /*一直都蓝色*/
font-weight: bold; /*加粗*/
}本回答被提问者采纳
: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 的后面。
<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就可以了。
CSS样式鼠标点击与经过的效果一样
1、新建一个HTML文件，文件名为test.html，title标题为"CSS实现鼠标经过导航的超链接时显示下划线效果"。2、在页面编写nav标签，在里面放三个超链接(首页、栏目一、栏目二)，代码如下：3、运行代码，效果如下：4、使用css对导航的字体的字体大小、颜色、排列方式等进行美化，代码如下：5、运行代码，效果...
如何用css实现鼠标移入时与鼠标移出时颜色相同,不使用js,,,急用...
4、在css标签内，再定义一个类名为newbg的样式，使用background属性设置背景颜色为黄色。5、在test.html文件中，给div绑定onmouseover鼠标移动事件，当鼠标移动至div时，执行myfun（）函数。6、在test.html文件中，在js标签内，创建一个myfun（）函数，在函数内，使用getElementById（）获得div对象，通过c...
CSS样式。怎么让按下后的样式刷新后还不变动
a:link,a:viseted{ \/\/当鼠标按下之前和按下之后的样式是相同的，所以刷新后也是一样的 fontsize:14px; \/\/字体大小为14px color:#ff0000; \/\/字体颜色为红色 text-decoration:none; \/\/没有下划线 } a:hover{ \/\/鼠标经过的时候 color:#00ff00; \/\/颜色为蓝色 fontsize:15...
CSS怎么让链接点击之前和点击之后颜色一样
a链接有几种状态：a:link(链接平常的状态)a:visited(链接被访问过之后)a:hover(鼠标放到链接上的时候)a:active(链接被按下的时候 )你可以在页面上设置一下，将你整个页面的a链接都先统一设置一下，例如：a:link，a:visited，a:hover，a:active{color:#333} 然后在整个页面有a想要单独设置的时候...
当鼠标点击字上之后变色加粗,点其他的又变为原样怎么设css
当鼠标点击字上之后变色加粗，点其他的又变为原样，是设置错误造成的，解决方法如下：1、首先就是打开Sublime Text编辑器，新建一个HTML页面，并添加HTML结构，如下图所示。2、然后在body区域添加字体，注意放在一个div里面，如下图所示。3、接下来就可以在CSS中用font-weight进行加粗设置了，只需要设置...
css里,链接,当鼠标放上去和点击时,字体都是原来颜色,保持不变色?_百度...
a标签原始的状态，鼠标移上去的状态，被点击的状态，都设置一种字体颜色 a,a:hover,a:active{ color:#000;} a:hover：鼠标处于鼠标悬停状态的链接样式 a:active：当鼠标左键按下时，被激活（就是鼠标按下去那一瞬间）的链接样式。
css 中怎么控制一个链接点击前后都是一个颜色,只是在鼠标经过时变红
a:link {color: #666666;text-decoration: none;} a:visited {color: #666666;text-decoration: none;} a:hover {color: #FF0000;text-decoration: none;} a:active {color: #666666;text-decoration: none;} 把a:link和a:visited的颜色设成一置,a:hover设成红色......
如何用它CSS设置鼠标单击后的样式
要实现鼠标单击后CSS样式的改变，你需要的基本工具包括电脑、浏览器和HTML编辑器。以下是一个简单的步骤指南:首先，启动HTML编辑器，创建一个新的文件，例如命名为"index.html"。接着，进入编辑器，在index.html文件中找到并插入
超强的纯 CSS 鼠标点击拖拽效果
首先，我们从理解resize属性开始。它允许元素调整大小，CSS语法如MDN所述。通过一个简单的DEMO，我们可以看到一个元素如何通过resize属性改变宽度。接下来，我们将resize应用到一个可拖动和缩放的元素上，将其与一个定位在右下角的小球结合，模仿鼠标点击拖拽的效果。虽然初始效果接近，但存在图标显示的问题。
...鼠标经过样式?就是效果跟onmouseover里面写的一样,在里面怎么写>...
加上伪类hover就行了，如a:hover{式样} 但要注意的是如果其他元素如li,span等在CSS1中不支持伪类，只有a支持，在CSS2中则都支持。现在IE6还有一定的份量，所以要注意，因为IE6只支持CSS1
