如何实现 css 鼠标点击a标签由样式1变为样式2
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何实现 css 鼠标点击a标签由样式1变为样式2相关的知识，希望对你有一定的参考价值。
样式1：
样式2：
<head>
<meta charset="utf-8">
<title>demo</title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
.menuborder-bottom: 1px solid #ccc;
.menu a
width: 120px;
height: 50px;
text-decoration: none;
display: block;
float: left;
text-align: center;
line-height: 50px;
.on border:1px solid #ccc;
</style>
<script>
$(function()
$(".menu a").click(function()
$(this).addClass("on").siblings().removeClass("on");
);
);
</script>
<body>
<div class="menu">
<a href="#" class="on">栏目一</a>
<a href="#">栏目二</a>
<a href="#">栏目三</a>
<a href="#">栏目四</a>
</div>
</body>
</html> 参考技术A
****样式一
a
color: #ccc;
font-size: 12px;
****样式二 鼠标放上去的时候
a:hover
color: #f66;
font-size: 14px;
****样式三 鼠标点击过后的样式
a:visited
color: pink;
****样式四 鼠标点击链接的样式
a:active
font-size:10px;
参考技术B 首先在css文件中设置对应的a标签样式1 ，一般用类名，如：<a href="#" class="style1" id =“a”>a标签</a>
.style1 color:#000 ; 同时准备样式2 .style2 color:#fff ;
在脚本事件中为a绑定点击事件：var a = document.getElementById("a");
a.onclick= function ()a.className = "style2"; 参考技术C <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>锚链接</title>
<style type="text/css">
* margin:0; padding:0;
a text-decoration:none; color:#333; transition:all .3s;
img border:0;
.clearfix*zoom:1;
.clearfix:before,.clearfix:after display:table; line-height:0; content:'';
.clearfix:after clear:both;
.box width:100%;border-bottom:2px solid #2FB860
ul width:1000px; margin:0 auto
ul li list-style:none; float:left;
ul li a display:block; padding:20px;
ul li a:hover background: #2FB860;color: #FFF;
ul li a.hover background: #2FB860;color: #FFF;
.box1 width:100%; height:auto;
.box1 .con width:1000px; height:800px; margin:0 auto; overflow:hidden; position:relative;
.box1 .con .con-box position:absolute; left:0; top:0;
.box1 .con .con-box p width:100%; height:800px;
</style>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<div class="box">
<ul class="clearfix">
<li><a href="javascript:void(0)" class="hover">这是第一个</a></li>
<li><a href="javascript:void(0)">这是第二个</a></li>
<li><a href="javascript:void(0)">这是第三个</a></li>
<li><a href="javascript:void(0)">这是第四个</a></li>
<li><a href="javascript:void(0)">这是第五个</a></li>
<li><a href="javascript:void(0)">这是第六个</a></li>
</ul>
</div>
<div class="box1">
<div class="con">
<div class="con-box">
<p><a href="javascript:void(0)">这是第一个</a></p>
<p><a href="javascript:void(0)">这是第二个</a></p>
<p><a href="javascript:void(0)">这是第三个</a></p>
<p><a href="javascript:void(0)">这是第四个</a></p>
<p><a href="javascript:void(0)">这是第五个</a></p>
<p><a href="javascript:void(0)">这是第六个</a></p>
</div>
</div>
</div>
<script type="text/javascript">
$("li").click(function()
var index =$(this).index();
$(this).find("a").addClass("hover").parent().siblings().find("a").removeClass("hover");
$(".con-box").stop().animate(top:-(800*index)+"px",500);
)
</script>
</body>
</html> 参考技术D 你这个说白了就是把下边框打出来下边框去掉啊， 这个 很简单。 给你个思路。 点击当前的这个元素。 先移除之前所有元素的样式，然后再爱给现在这个元素添加
<style>
divwidth:200px;height:200px;
.cls1background-color:red;
.cls2background-color:blue
</style>
<script>
$('#div1').click(function()
$(this).removeClass('cls1');
$(this).addClass('cls2');
);
</script>
<div id="div1" class="cls1">点击<div>
主要是你的样式 要先写好。我写的这个是最简单的。 当然也可以用纯的js来动态赋值动态处理
如何让firefox和chrome支持css自定义鼠标样式？IE中用“cursor:url()”属性可以实现，FF、Chrome怎么弄？
我想要通用的解决方案 最好是兼容所有浏览器的写法。
如何让firefox和chrome支持css自定义鼠标样式？IE中用“cursor:url()”属性可以实现，FF、Chrome怎么弄？
我想要通用的解决方案 最好是兼容所有浏览器的写法。
不要说FF不能实现，百度图片浏览在FF下鼠标变成箭头形状就能没有任何问题。
谢谢。
问题已自己解决，一点小总结：
body, html cursor:url(http://127.0.0.1/a/c.cur),default; 后面一定要有一个标准属性，url相对绝对路径都可以，auto、default什么的都可以。
FF MS不支持动态cur，一点也不支持ani。想让鼠标透明只需透明图替换即可。
另外一个问题在于默认FF下body和html都是0宽高，要解决这个问题可以用JS动态设置body的高度。
如果不设置html而只有body的话，IE下默认也不会出现。
以下供您参考：
mouse_style_fdcursor:url(/ani/fd.cur),auto
IE下为相对路径，不加,auto没有问题。
Firefox下必须为根路径，必须加,auto 。
(/ani/fd.cur)为自定义鼠标的路径。
感谢您对火狐浏览器的支持！ 参考技术A 请教 啥叫JS设置body的高度？
还有我加了标准属性FF chrome都没实现，有没有实例可以发个，
求 参考技术B 嗯，lz是牛人，css高手。 参考技术C 不错！
以上是关于如何实现 css 鼠标点击a标签由样式1变为样式2的主要内容，如果未能解决你的问题，请参考以下文章
请教a标签的属性样式，能否只有鼠标移入的效果，点击是没任何指向链接