您的位置首页生活百科

html hover怎么用

html hover怎么用

的有关信息介绍如下:

html hover怎么用

在html网页制作中,其实会经常用到伪类选择器hover,hover基本上适用于所有的html元素。那么在html中hover怎么用呢?下面就随我一起进行实际操作吧。

第一步:首先利用代码编辑软件edit plus5新建一个html文件。

第二步:在新建的网页文件代码中,首先演示给带有超链接的文字添加hover属性,即先编写一个标签。

有超链接的文字

第三步:给刚才编写的a标签编写样式,并给a标签添加hover 属性。

第四步:保存该html文件后,在edge浏览器中进行浏览,当鼠标移动到该文字上时就会触发hover属性。

第五步:接下来演示给一张图片添加hover属性。即首先在html代码中编写一个图像标签。

第六步:接下来,给图片添加hover属性,实现当鼠标移动到图片上时,图片变成半透明形状。

img:hover{ opacity:0.4;}

第七步:在edge浏览器中进行浏览,当鼠标移动到图片上时,图片就会变为半透明了。

总结:

1、在html中hover属性适用于所有html标签元素,以上演示的仅仅是对a标签文字和img图片添加hover 属性,其他标签使用方法一样

2、在使用hover属性时,只需要在样式表中,在标签后添加:hover即可

3、注意冒号时英文状态下的冒号