CSS样式鼠标点击与经过的效果一样 在同一页面实现CSS样式 点击 按下 鼠标经过 活动 代码
\u5982\u4f55\u7528CSS\u6837\u5f0f\u63a7\u5236\u9f20\u6807\u7ecf\u8fc7\u6548\u679c,\u6bd4\u5982\u9f20\u6807\u7ecf\u8fc7\u90a3\u5757\u65f6,\u80cc\u666f\u8272\u6539\u53d8.a \u9009\u62e9\u5668\u6709\u56db\u4e2a\u4f2a\u7c7b\u5206\u522b\u4e3a\uff1a
link (\u672a\u88ab\u8bbf\u95ee\u7684\u94fe\u63a5\u6837\u5f0f)
hover \uff08\u9f20\u6807\u60ac\u505c\u5728\u94fe\u63a5\u4e0a\u7684\u6837\u5f0f\uff09
action \uff08\u5728\u9f20\u6807\u70b9\u51fb\u4e0e\u91ca\u653e\u4e4b\u95f4\u53d1\u751f\u7684\u4e8b\u4ef6\u65f6\u7684\u6837\u5f0f\uff09
visited \uff08\u5df2\u7ecf\u88ab\u8bbf\u95ee\u8fc7\u7684\u94fe\u63a5\u7684\u6837\u5f0f\uff09
\u56db\u4e2a\u4f2a\u7c7b\u5b9a\u4e49\u65f6\u9700\u8981\u6309\u4ee5\u4e0a\u987a\u5e8f\u6765\uff0c\u5426\u5219\u4f1a\u53d1\u751f\u9519\u8bef\u3002
\u4f60\u6240\u8bf4\u7684\u5c31\u662f\u73b0\u8c61\u5c31\u662fhover\u65f6\u51fa\u73b0\u7684\u60c5\u51b5\u3002
\u4e3e\u4e2a\u4f8b\u5b50
\u5148\u5b9a\u4e49\u597d\u6837\u5f0f:
a:hover {background-color:green;} //\u9f20\u6807\u60ac\u505c\u5728\u94fe\u63a5\u4e0a\u65f6\u80cc\u666f\u53d8\u4e3a\u7eff\u8272
\u5728html\u4ee3\u7801\u4e2d\u67e5\u770b\u6548\u679c\uff1a
\u79fb\u52a8\u5230\u8fd9\u770b\u6211\u7684\u80cc\u666f\u8272\u53d8\u5316
\u70b9\u51fb\u7528JS\u5b9e\u73b0\uff1a
function disp_alert()
{
alert("\u6211\u662f\u8b66\u544a\u6846\uff01\uff01")
}
\u70b9\u51fb
\u6309\u4e0b a:active{color:#f00;}
\u7ecf\u8fc7\uff1aa:hover{color:#000; }
\u4e0d\u8fc7\u4e00\u822c\u90fd\u6709\u987a\u5e8f\u7684 link,visited,hover,active\u4e00\u822c\u662f\u8fd9\u6837\u7684\u987a\u5e8f
1、新建一个HTML文件，文件名为test.html，title标题为"CSS实现鼠标经过导航的超链接时显示下划线效果"。
2、在页面编写nav标签，在里面放三个超链接(首页、栏目一、栏目二)，代码如下：
3、运行代码，效果如下：
4、使用css对导航的字体的字体大小、颜色、排列方式等进行美化，代码如下：
5、运行代码，效果如下：可见，经过CSS样式美化，鼠标经过的时候，显示蓝色。
6、利用CSS编写代码，实现鼠标经过时显示下划线效果，代码如下：
7、在浏览器运行代码，实现了想要的效果。
a:link /* 未访问的链接 */
a:visited /* 已访问的链接 */
a:hover /* 当有鼠标悬停在链接上 */
a:active /* 被选择的链接 */
a,a:visited,a:hover,a:active { /*全部状态都一样的效果*/
text-decoration: none; /*没有下划线*/
color: blue; /*一直都蓝色*/
font-weight: bold; /*加粗*/
}
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 的后面。
<!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就可以了。
绛旓細閾炬帴鐨勬縺娲荤姸鎬侊紝灏辨槸涓绉嶅吀鍨嬬殑浜や簰鏁堟灉锛屾垜浠兘鐭ラ亾閾炬帴鏂囧瓧鎴栧浘鐗囩瓑鍙互閫氳繃璁剧疆閾炬帴鐨凥over 鐘舵佸睘鎬ф潵瀹屾垚璁剧疆銆傚鏋滄枃瀛楁垨鍥剧墖鏈韩骞舵病鏈夎秴閾炬帴銆傛垜浠濡備綍缂栧啓杩欐牱鐨勬晥鏋鍛紵榧犳爣缁忚繃鏃跺彲浠ュ垏鎹CSS 鍙互瀹炵幇鍚楋紵 鎴戜滑鍙互鍒╃敤灏忚剼鏈潵瀹炵幇杩欐牱鐨勬晥鏋滐紝褰撶劧锛屽畠骞朵笉浼氭秷鑰椾綘寰堝鐨勮祫婧愶紝涓嶄細鍗犵敤浣犲お...
绛旓細鏃犳爣棰樻枃妗 12 榛樿鑳屾櫙锛.bg{background-color:#FFF; border:1px solid #000;} 榧犳爣缁忚繃锛歛:hover{background-color:#d6d6d6; border:1px solid #000;} 鐐瑰嚮锛歛:active {background-color:#929292; border:1px solid #000;} 鐐瑰嚮鍚庯細a:visited {background-color:#929292; border:...
绛旓細1銆佸厛鍦ㄦ壘涓枃浠跺す鍒涘缓鏂囦欢index.html銆2銆佺劧鍚庣敤鑳界紪杈戞枃鏈枃浠剁殑杞欢鎵撳紑index.html锛宨ndex.html鐨勫垵濮嬪唴瀹瑰鍥俱3銆佹帴鐫缂栧啓涓や釜鏍峰紡浣滀负榧犳爣绉诲姩鏃禿iv淇敼鐨勬牱寮忋4銆佺劧鍚庣紪鍐檍s浠ｇ爜淇敼div鐨勬牱寮忋5銆佺紪杈戝畬index.html鍚庝繚瀛橈紝鍦ㄦ祻瑙堝櫒涓墦寮index.html銆鏁堟灉濡傚浘銆傞紶鏍囩Щ鍏ョЩ鍑篸iv鏃讹紝div鐨勬牱寮忔敼鍙...
绛旓細a{background:#fff;} 姝ｅ父鐘舵佷笅 a:hover{ background:url("image/bg.jpg") #000; } 榧犳爣鍦ㄨ彍鍗曚笂鐨勯鑹诧紝娌′娇鐢ㄥ浘鐗囧仛鑳屾櫙灏辩洿鎺ュ啓棰滆壊 鐐瑰嚮鍚庡仠鐣欑姸鎬佸仠鐣欙紝鐐瑰嚮鍚庣粰璇ラ摼鎺ユ寜閽姞涓猚lass鎴杋d 濡 鐒跺悗鍐欎笅璇ョ被鐨css鏍峰紡鍜岄紶鏍鍋滅暀鍦ㄤ笂闈㈢殑涓鏍峰氨琛屼簡锛屽 a.home{ background:url("imag...
绛旓細1.鎵撳紑dw杞欢骞跺垱寤轰竴涓柊鏂囨。銆2.鍦╠w涓紝缂栧啓浠ヤ笅css鏍峰紡锛 .mengsb {width锛648px; margin锛0px auto;}.jixing1 a {position锛歳elative; width锛320px; margin锛0 0px 0 0; float锛歭eft; height锛232px;}銆3.鐒跺悗灏嗕互涓嬪浘鍍忔坊鍔犲埌姝ｆ枃涓紝浠ｇ爜涓猴細 銆4.鏌ョ湅瀹炴椂瑙嗗浘涓殑鏈缁鏁堟灉銆5锛...
绛旓細1銆佹墦寮html寮鍙戝伐鍏峰苟鍒涘缓涓涓猦tml鏂囦欢銆2銆佸湪html椤甸潰涓婃壘鍒版爣璁帮紝閿叆鏍囪锛屽苟鐢ㄦ爣璁拌鐩栧唴瀹广3銆佷慨鏀规爣绛剧殑鍐呭锛屽皢棰滆壊璁剧疆涓鸿摑鑹层4銆佸皢榧犳爣璁剧疆涓哄湪鏍囩涓婃粦鍔紝瀛椾綋涓嬫柟灏嗗彉涓虹孩鑹蹭笅鍒掔嚎锛歛锛歨over {color锛歳ed}銆
绛旓細3銆佸湪css鏍囩鍐咃紝瀵筪iv杩涜鏍峰紡璁剧疆锛屼娇鐢╳idth灞炴ц缃甦iv鐨勫搴︿负200px锛屼娇鐢╤eight灞炴ц缃甦iv鐨勫搴︿负20px锛屼娇鐢╞ackground灞炴ц缃甦iv鐨勮儗鏅鑹蹭负绾㈣壊銆4銆佸湪css鏍囩鍐咃紝鍐嶅畾涔変竴涓被鍚嶄负newbg鐨勬牱寮忥紝浣跨敤background灞炴ц缃儗鏅鑹蹭负榛勮壊銆5銆佸湪test.html鏂囦欢涓紝缁檇iv缁戝畾onmouseover榧犳爣绉诲姩浜嬩欢锛...
绛旓細婵娲荤殑銆佸凡璁块棶鐨勩佹湭璁块棶鐨勬垨鑰呭綋鏈榧犳爣鎮仠鍦ㄥ叾涓婄殑閾炬帴锛屽畠浠細鍦ㄦ敮鎸 CSS 鐨勬祻瑙堝櫒涓互涓嶅悓鐨勬柟寮忔樉绀哄嚭鏉ワ細鎴戜笉娓呮浣犺鐨勭獊鍑烘樉绀鐨勬晥鏋锛屾槸涓嶆槸鍥剧墖鍙樺ぇ銆傚鏋滄槸閭ｆ牱鐨勮瘽锛屽彲浠ュ厛瀹氫箟涓涓嬶紝鐒跺悗涔嬪悗img.big:hover {width:澶氬皯px;height:澶氬皯px;} 灏辨槸鎶婂畠缃负椤跺眰灏卞彲浠ヤ簡銆傚叿浣撶殑娴姩浠涔...
绛旓細3銆鍗曞嚮鈥滃彟瀛樹负鈥濈殑鍔熻兘閫夐」锛屾樉绀洪粯璁や繚瀛樹负缂栫爜涓篈NSI銆4銆佹垜浠皢鏇存敼缂栫爜鍜屾枃浠跺悕锛屽皢鍏舵洿鏀逛负濡傚浘鎵绀虹殑鍥惧儚骞朵繚瀛樸5銆佺劧鍚庤繑鍥炲埌鏂板垱寤虹殑鏂囦欢澶癸紝鍙戠幇鏈変竴涓澶栫殑html鏂囦欢銆6銆佹渶鍚庯紝浣跨敤娴忚鍣ㄦ墦寮html鏂囦欢锛鏁堟灉濡傚浘鎵绀猴紝绠鍗曠殑缃戦〉琚垚鍔熺紪鍐欍侱reamweaver闈欐佺綉椤靛埗浣滄楠ゆ湁鍝簺锛1銆佸湪...
绛旓細浣犲彲浠ュ杩欎釜閾炬帴鍔犱釜css鏍峰紡 瀵艰埅1 涓嬮潰鐨勪唬鐮佹斁鍒癶ead鏍囩鍐 A.my2:link {COLOR: #000000;}/姝ｅ父鐘舵 A.my2:visited {COLOR: #000000;TE宸茬粡璁块棶杩囩殑閾炬帴 A.my2:hover {COLOR: #FF0000;;font-weight: bold}/榧犳爣绉诲埌閾炬帴涓婄殑 瀹鐨勬晥鏋灏辨槸姝ｅ父鐘舵佹樉绀洪粦鑹茬殑鏂囧瓧,榧犳爣鏀句笂鍘讳究鎴愮孩鑹...
