当鼠标点击字上之后变色加粗,点其他的又变为原样怎么设css

html-css014

当鼠标点击字上之后变色加粗,点其他的又变为原样怎么设css,第1张

当鼠标点击字上之后变色加粗,点其他的又变为原样,是设置错误造成的,解决方法如下:

1、首先就是打开Sublime Text编辑器,新建一个HTML页面,并添加HTML结构,如下图所示。

2、然后在body区域添加字体,注意放在一个div里面,如下图所示。

3、接下来就可以在CSS中用font-weight进行加粗设置了,只需要设置bold就可以了,如下图所示。

4、另外font-weight还可以被设置为从100到900的数值,数字越大越粗,如下图所示。

5、最后当font-weight被设置为100的时候,字体是最细的,如下图所示。

完美的封装了popUpBox这个类

这个类一共两个公开方法

show    显示

hidden    隐藏

其他功能请自行扩展

不敢保证简单,但每一行都写了注释

<!DOCTYPE html>

<html>

<head>

<title>CSS 点击文字或按钮打开div浮动层 </title>

<meta charset="UTF-8" />

</head>

<script>

function popUpBox(){ //创建盒子类

this.init = function(){ //初始化函数

var onloadFunc = window.onload, //将window.onload事件执行的函数保存到onloadFunc

subInit = function(o){ //需要等结构加载完成执行的函数

document.body.appendChild(o.mask) //将遮罩添加到body

document.body.appendChild(o.box) //将盒子添加到body

},

createElement = function(){ //创建元素函数,共同的样式在这里已经设置

var e = document.createElement('div') //创建一个div

e.style.position = 'fixed' //设置定位方式为跟随浏览器移动

e.style.left = '0px' //元素x轴位置

e.style.top = '0px' //元素y轴位置

e.style.zIndex = '2000' //元素z轴位置

e.style.width = window.innerWidth + 'px' //元素宽度

e.style.height = window.innerHeight + 'px' //元素高度

e.style.margin = '0px' //元素的外边距

e.style.padding = '0px' //元素的内边距

e.style.backgroundColor = 'rgba(0, 0, 0, 0.3)' //元素的背景颜色

return e //返回这个元素

}

this.mask = createElement() //创建遮罩

this.mask.onclick = (function(o){ //创建匿名函数 参数一 传入需要操作的对象

return function(){ //匿名函数返回为遮罩绑定鼠标点击事件执行函数

o.hidden() //为o这个对象执行隐藏函数

}

})(this) //立即执行匿名函数 并传入当前对象

this.box = createElement() //盒子

this.box.style.left = window.innerWidth / 2 + 'px' //设置盒子水平居中

this.box.style.top = window.innerHeight / 2 + 'px' //设置盒子垂直居中

this.box.style.width = '400px' //设置盒子宽度

this.box.style.height = '300px' //设置盒子高度

this.box.style.border = '1px solid #3399ff' //设置边框

this.box.style.borderRadius = '5px' //设置圆的边框

this.box.style.zIndex = '2001' //设置盒子的z轴

this.box.style.backgroundColor = '#FFF' //设置盒子的背景颜色

this.box.style.transform = 'translate(-50%, -50%)' //执行2d动画,把这个盒子位置向反方向移动50%

this.box.innerHTML = '在这里设置盒子的内容,关闭盒子调用实例的hidden()函数即可,如这个实例想这样 loginBox.hidden()//就可以隐藏 '

this.hidden() //隐藏遮罩和盒子

window.onload = (function(o){ //创建匿名函数 参数一 要操作的对象

return function(){ //返回onload事件执行的函数

if(typeof onloadFunc == 'function'){ //判断onloadFunc中有没有函数,防止覆盖其他功能的执行事件

onloadFunc() //执行已经绑定的函数

}

subInit(o) //执行初始化需要执行的函数

}

})(this) //立即执行匿名函数 并传入当前对象

}

this.show = function(){ //显示

this.mask.style.display = 'block'

this.box.style.display = 'block'

}

this.hidden = function(){ //隐藏

this.mask.style.display = 'none'

this.box.style.display = 'none'

}

this.init() //调用初始化函数

}

var loginBox = new popUpBox() //创建一个实例,可以创建N个,互相不干扰

</script>

<body>

<a href="#" onclick="loginBox.show()">弹出盒子</a>

</body>

</html>

第一步,点击文本框,在属性栏中填写你需要的文字;见下图

第二步,为文本框文字添加css属性,点击文本框,可以在css面板中直接选择颜色或填写值;(可以在网页中直接定义css,也可以新建一个css文件)

显示效果

如果要实现鼠标点击灰色文字自动消失,需要使用js编程,可以在网上找js或jquery效果代码添加进页面内。

附上具体代码:

<!DOCTYPE html><html><head><style>.txt{    color:#ccc}.focus{    color:#333}</style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script>$(document).ready(function(){    var str="我是灰色文字"    $(".txt").val(str)         $(".txt").focus(function(){        var v=this.value        if(v == str){            $(this).val("").addClass("focus")        }    }).blur(function(){        var v=this.value        if(v == ""){            $(this).val(str).removeClass("focus")                     }    })})</script></head><body><input class="txt" type="text" value="我是灰色文字"/></body></html>