养花知识
花卉大全
花卉诊疗
多肉植物
养花攻略
养花问答
网站首页css 点击当前的文字 字体变颜色 然后点击其他的字 其他的字颜色改变 但是上一个字的颜色还原
css鼠标经过字体颜色改变，点击后又不改变了！求解!
这个站，www.szkfqz.com 首页鼠标点过之后就没有鼠标移动上去就变字体颜色的效果了。我很郁闷不知道如何解决，请高手们教下。如下代码：rn下面是字体CSS代码：rn@charset "utf-8";rn/* CSS Document */rn#top2_3 a:link {rncolor:#666; text-decoration:none;background-position:0px 0px;line-height:37px;rn}rn#top2_3 a:hover {rncolor:#fff;text-decoration:none;background-position:0px 0px;line-height:37px;rn}rnrn#top2_3 a:visited {rncolor:#666;text-decoration:none;background-position:0px 0px;line-height:37px;rn}rn#top2_3 a:active {rncolor:#fff;text-decoration:none;background-position:0px 0px;line-height:37px;rn}rn#top2_3:hover{rncolor:#fff;text-decoration:none; background-image: url(/imges/4.gif);line-height:37px;background-position:0px 0px;rn}rnrn#top2_4 a:link {rncolor:#666; text-decoration:none;background-position:0px 0px;line-height:37px;rn}rn#top2_4 a:hover {rncolor:#f00;text-decoration:none;background-position:0px 0px;line-height:37pNeHMFx;rn}rnrn#top2_4 a:visited {rncolor:#666;text-decoration:none;background-position:0px 0px;line-height:37px;rnNeHMF}rn#top2_4 a:active {rncolor:#f00;text-decoration:none;background-position:0px 0px;line-height:37px;rn}rnrn#top2_5 a:link {rncolor:#666; text-decoration:none;background-position:0px 0px;line-height:37px;rn}rn#top2_5 a:hover {rncolor:#f00;text-decoration:none;background-position:0px 0px;line-height:37px;rn}rnrn#top2_5 a:www.rixia.ccvisited {rncolor:#666;text-decoration:none;background-position:0px 0px;line-height:37px;rn}rn#top2_5 a:active {rncolor:#f00;text-decoration:none;background-position:0px 0px;line-height:37px;rn}rnrnrn#nr2_1 a:link {rncolor:#666; text-decoration:none;background-position:0px 0px;line-height:25px;rn}rn#nr2_1 a:hover {rncolor:#f00;text-decoration:none;background-position:0px 0px;line-height:25px;rn}rnrn#nr2_1 a:visited {rncolor:#666;text-decoration:none;background-position:0px 0px;line-height:25px;rn}rn#nr2_1 a:active {rncolor:#f00;text-decoration:none;background-position:0px 0px;line-height:25px;rn}rnrnrnrn#foot1:hover{rncolor:#fff;text-decoration:none; background:url(/imges/16.gif);line-height:80px;background-position:0px 0px;rn}rnrn首页代码你可以看下http://www.szkfqz.com这个站上#top2_3 a:visited {
color:#666;text-decoration:none;background-position:0px 0px;line-height:37px;
}
visited表示访问过后的样式，你这里设置的是#666，当然不能恢复到#fff了。将所有的这个修改为
color:#fff;text-decoration:none;background-position:0px 0px;line-height:37px;
}
#nr2_1 a:link {
color:#666; text-decoration:none;background-position:0px 0px;line-height:25px;
}
#nr2_1 a:visited {
color:#666;text-decoration:none;background-position:0px 0px;line-height:25px;
}
#nr2_1 a:hover {
color:#f00;text-decoration:none;background-position:0px 0px;line-height:25px;
}
#nr2_1 a:active {
color:#f00;text-decoration:none;background-position:0px 0px;line-height:25px;
}
以后你记好顺序，是爱恨 LOVE HEAT
:link visited hover active
当鼠标点击字上之后变色加粗，点其他的又变为原样怎么设css
当鼠标点击字上之后变色加粗，点其他的又变为原样，是设置错误造成的，解决方法如下：
1、首先就是打开Sublime Text编辑器，新建一个HTML页面，并添加HTML结构，如下图所示。
2、然后在body区域添加字体，注意放在一个div里面，如下图所示。
3、接下来就可以在CSS中用font-weight进行加粗设置了，只需要设置bold就可以了，如下图所示。
4、另外font-weight还可以被设置为从100到900的数值，数字越大越粗，如下图所示。
5、最后当font-weight被设置为100的时候，字体是最细的，如下图所示。
思路如下：为文字的变色加粗设置一个class，当某个元素被点击就应用此class，其他元素就移除此class。下面给出实例演示：
创建Html元素
<div class="box"><span>点击对象后设置字体样式，同时取消其他对象的此样式：</span><br>
<div class="content">
<span>我是span中的文字。</span>
<p>我是个p。</p>
<li>list-item</li>
</div>
</div>
设置css样式
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}div.box span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
li{margin:10px 0;padding:10px 0;}
.selected{font-weight:bold !important; color:red !important;}
编写jquery代码
$(function(){$("body").click(function(e) {
$("*").removeClass('selected'); // 先删除所有元素的selected样式
$(e.target).addClass('selected'); // 然后为被点击元素添加selected样式
});
})
观察效果
初始样式
点击第一个span的效果
接着点击最后一个li的效果
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset = gb2312" />
</head>
<body>
<script type="text/javascript">
function changeA(){
document.getElementById("menuA").style.background='#f00';
document.getElementById("menuB").style.background='#fff';
}
function changeB(){
document.getElementById("menuB").style.background='#f00';
document.getElementById("menuA").style.background='#fff&#NeHMF39;;
}
</script>
<input type="button" onclick="changeA()" value="A"/>
<input type="button" onclick="changeB()" value="B"/>
<div id="menuA" style="width:300px;height:300px;">
A
</div>
<div id="menuB" style="width:300px;height:300px;">
B
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>hover变色</title>
<style>
.cube { width: 100px; text-align: center; line-height: 24px; height: 24px; border: 1px solid #CCC; margin: 10px; cursor: pointer; }
</style>
<script>
function exec() {
var lastIndex = 0;
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; ++i) {
(function(i) {
divs[i].onclick = function() {
divs[lastIndex].style.backgroundColor = "#FFF";
divs[lastIndex].style.fontWeight = "normal";
lastIndex = i;
divs[i].style.backgroundColor = "#CCC";
divs[i].style.fontWeight = "bold";
}
})(i);
}
}
</script>
</head>
<body onload="exec()">
<div class="cube">第一块</div>
<div class="cube">第二块</div>
<div class="cube">第三块</div>
<div class="cube">第四块</div>
<div class="cube">第五块</div>
</body>
</html>
懂CSS代码的朋友帮忙添加句代码，鼠标点击超链接后文字变色，点其他选项此颜色恢复
想把这个列表的字体变大些，并且鼠标点击后文字颜色改变，点击其他的项，刚才变色的这个恢复
原CSS代码如下（复制的），请告知应该在什么位置添加什么代码能实现这个功能
/* ============分类列表============== */
div.productclass_menu{
margin:0px;
padding:0px;
width:100%;
}
a.productclass_menu:link,a.productclass_menu:visited,a.productclass_menu:active{
display:block;
color: #303030;
text-decoration: none;
font:14px/38px 'Microsoft YaHei','SimSun',Arial,Sans-Serif;
height:40px;
background:url(../images/classmenu2.gif) 0px 0px no-repeat;
padding-left:55px;
}
a.productclass_menu:hover{
display:block;
color: #ff6600;
text-decoration: none;
height:40px;
font:bold 16px/38px 'Microsoft YaHei','SimSun',Arial,Sans-Serif;
background:url(../images/classmenu2.gif) 0px -40px no-repeat;
padding-left:55px;
}
div.productclass_menu{
margin:0px;
padding:0px;
width:100%;
}
.productclass_menu a{
display:block;
color: #303030;
text-decoration: none;
font:16px 'Microsoft YaHei','Si日夏养花网mSun',Arial,Sans-Serif;
height:40px;
background:url(../images/classmenu2.gif) 0px 0px no-repeat;
padding-left:55px;
}
.productclass_menu:hover a:hover{
display:block;
color: #ff6600;
text-decoration: none;
height:40px;
font:bold 18px 'Microsoft YaHei','SimSun',Arial,Sans-Serif;
background:url(../images/classmenu2.gif) 0px -40px no-repeat;
padding-left:55px;
}
文章标签:
上一篇：指示生物的生物简介
下一篇：有关星空的天文知识