当鼠标点击字上之后变色加粗,点其他的又变为原样怎么设css
发布网友
发布时间：2022-04-23 12:50
共6个回答
热心网友
时间：2022-04-06 14:57
当鼠标点击字上之后变色加粗，点其他的又变为原样，是设置错误造成的，解决方法如下：
1、首先就是打开Sublime Text编辑器，新建一个HTML页面，并添加HTML结构，如下图所示。
2、然后在body区域添加字体，注意放在一个div里面，如下图所示。
3、接下来就可以在CSS中用font-weight进行加粗设置了，只需要设置bold就可以了，如下图所示。
4、另外font-weight还可以被设置为从100到900的数值，数字越大越粗，如下图所示。
5、最后当font-weight被设置为100的时候，字体是最细的，如下图所示。
热心网友
时间：2022-04-06 16:15
思路如下：为文字的变色加粗设置一个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的效果
热心网友
时间：2022-04-06 17:50
<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';
}
</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>
热心网友
时间：2022-04-06 19:41
<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>
热心网友
时间：2022-04-06 21:49
追答
span{ cursor:pointer}
用 JQ 框架
你的代码 例如： aaa bbb ccc DDD
$(function(){
$("span").click(function(){
$("span").css({"fontWeight":"normal"})//取消所有的
$(this).css({"fontWeight":"bold"})//设置当前的
})
})
热心网友
时间：2022-04-07 00:14
a:hover{color:white;font-weight:bold;}
