在同一页面实现CSS样式 点击 按下 鼠标经过 活动 代码 CSS样式鼠标点击与经过的效果一样

\u9f20\u6807\u7ecf\u8fc7\u548c\u9f20\u6807\u70b9\u51fb\u540e\u7684CSS\u4ee3\u7801\u600e\u4e48\u5199\u5462?

a:hover{} \u9f20\u6807\u7ecf\u8fc7
a:visited{}\u9f20\u6807\u70b9\u51fb\u540e

1\u3001\u65b0\u5efa\u4e00\u4e2aHTML\u6587\u4ef6\uff0c\u6587\u4ef6\u540d\u4e3atest.html\uff0ctitle\u6807\u9898\u4e3a"CSS\u5b9e\u73b0\u9f20\u6807\u7ecf\u8fc7\u5bfc\u822a\u7684\u8d85\u94fe\u63a5\u65f6\u663e\u793a\u4e0b\u5212\u7ebf\u6548\u679c"\u3002

2\u3001\u5728\u9875\u9762\u7f16\u5199nav\u6807\u7b7e\uff0c\u5728\u91cc\u9762\u653e\u4e09\u4e2a\u8d85\u94fe\u63a5(\u9996\u9875\u3001\u680f\u76ee\u4e00\u3001\u680f\u76ee\u4e8c)\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a

3\u3001\u8fd0\u884c\u4ee3\u7801\uff0c\u6548\u679c\u5982\u4e0b\uff1a

4\u3001\u4f7f\u7528css\u5bf9\u5bfc\u822a\u7684\u5b57\u4f53\u7684\u5b57\u4f53\u5927\u5c0f\u3001\u989c\u8272\u3001\u6392\u5217\u65b9\u5f0f\u7b49\u8fdb\u884c\u7f8e\u5316\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a

5\u3001\u8fd0\u884c\u4ee3\u7801\uff0c\u6548\u679c\u5982\u4e0b\uff1a\u53ef\u89c1\uff0c\u7ecf\u8fc7CSS\u6837\u5f0f\u7f8e\u5316\uff0c\u9f20\u6807\u7ecf\u8fc7\u7684\u65f6\u5019\uff0c\u663e\u793a\u84dd\u8272\u3002

6\u3001\u5229\u7528CSS\u7f16\u5199\u4ee3\u7801\uff0c\u5b9e\u73b0\u9f20\u6807\u7ecf\u8fc7\u65f6\u663e\u793a\u4e0b\u5212\u7ebf\u6548\u679c\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a

7\u3001\u5728\u6d4f\u89c8\u5668\u8fd0\u884c\u4ee3\u7801\uff0c\u5b9e\u73b0\u4e86\u60f3\u8981\u7684\u6548\u679c\u3002

点击用JS实现:
<script>
function disp_alert()
{
alert("我是警告框!!")
}
</script>
<a href="#" onclick="disp_alert()">点击</a>
按下 a:active{color:#f00;}
经过:a:hover{color:#000; }
不过一般都有顺序的 link,visited,hover,active一般是这样的顺序

按下是要用JS来做的,CSS只能做移过的

.class a{display:block;height:18px;width:100px} //把A做成快,限高,高宽
.class a:hover{background:#f00;} //鼠标移过

<a href='' onclick="this.style.background='#000'"></a> //onclick里面可使用方法按下

扩展阅读:div css页面布局 模板 ... css样式规则大全 ... 轮插图css ... 设置登录页面css的样式 ... css样式模板 ... 链入式引入css样式表 ... css实现图片切换 ... css样式种类及各自特点 ... css样式表不可能实现 功能 ...

本站交流只代表网友个人观点,与本站立场无关
欢迎反馈与建议,请联系电邮
2024© 车视网