css hover 的简单使用
的有关信息介绍如下:
在写前端页面时,会遇到鼠标移入div改变div背景色,字体颜色,边框色等需求,今天来看一下如何用css的hover属性解决
在HBuilder编辑器里新建一个html页面,在body标签里面三个div,并写好div的公共样式,代码如图所示
在浏览器里打开html页面,看一下显示效果
回到编辑器,在div的class为a的样式里写入鼠标移入后改变的背景色和文字颜色,在div的class为b的样式里写入鼠标移入后改变边框色,在div的class为c的样式写入鼠标移入后隐藏该div
打开浏览器,逐个看一下效果
放一下代码
body{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 80px;
line-height: 80px;
text-align: center;
border: 1px solid #000000;
margin:50px auto;
}
.a:hover{
background: red;
color: #FFFFFF;
}
.b:hover{
border: 1px solid red;
}
.c:hover{
display: none;
}
改变背景色和文字颜色
改变边框色
控制本身显示隐藏



