HTML竖向弹出菜单带鼠标划动效果代码

HTML竖向弹出菜单带鼠标划动效果代码

学习目地:今天要给大家讲下弹出菜单升级版,多了一个二级菜单鼠标移动效果,下面会使用到HTML语言+CSS语言+鼠标

伪类。如果还没具备以上三种能力,下面讲的理论会很难理解。请先从头看下我以前讲的内容,代码准备如图1。

代码准备

从图1代码中可以看出代码设计原理是,通过HTML语言

标签容器载入多个HTML语言无序列表标签

嵌套,在用CSS语言控制HTML语言外观并利用鼠标事件伪类:hover实现弹出式动作,然后在设计嵌套无序列表鼠标事件伪类:hover移动鼠标改变背景色。

(图片来自网络,图1)

把图1中的代码输入到记事本中,然后把代码另存为HTML文件如图2

(图片来自网络,图2)

打开图2,如果可以正确显示出图2的效果,就说明HTML语言的ul和li标签已经成功给控制了。当我们把鼠标移动到图2中的文字上,那么就会弹出一个无序列表框,那么就说明我们的鼠标伪能已经正常运行了,如图3.

(图片来自网络,图3)

(图片来自网络,图4)

**************EMD**************

部分内容参考网络,本文只限于学习交流请勿它用

***********************************

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190110G0740L00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励