1、新建一个html文件,命名为test.html。
2、在test.html文件内,创建一个div模块,下面将使用css设置该div的样式,实现鼠标移到div上显示手型。
3、在test.html文件内,设置div的class属性为mydiv,主要用于css对该div进行样式定义。
4、在css标签中,使用“*”来初始化页面所有元素的内边距为0,外边距为0。
5、在css标签中,对类名为mydiv的div进行样式定义,设置其宽度为200px,高度为200px,背景颜色为黄色。
6、最后,使用css设置div的cursor属性值为pointer,即鼠标移到div上显示手型。
用css伪类hover可以实现这个功能。
1、新建html文档,在body标签中添加一个div标签,然后在div标签中添加p标签,为p标签添加内容:
2、为了方便演示,给div标签设置宽高和背景颜色,然后给p标签设置“display”属性,属性值为“none”,这样p标签中的文字默认情况下不会显示:
3、给div设置hover伪类,当鼠标移动到div区域时,设置p标签的样式为块级元素“block”:
4、这样当鼠标移动到div上时就会显示p标签内容,鼠标离开就不显示p标签内容: