以将 下拉菜单嵌入由盒子中 充当的按钮 为例来说明问题，以类选择器为button的盒子当作触发下拉菜单的容器(即是当鼠标移动到该按钮上面出现下拉框)，则必须将hover属性附着在按钮盒子的上一级盒子上，但是通常上一级的盒子比当前盒子大或者里面有多个小盒子，那么鼠标放在按钮外部和上一级盒子的内部仍然可以将下拉带单显示，于是尝试在按钮盒子的上一级加上了一个与按钮大小一样的按钮，并将下拉菜单附着于此。
第一想法就是给未显示（默认隐藏时）的下拉菜单栏添加，其结果就是边框一直处于显示状态，在下拉菜单栏隐藏时无法隐藏。解决方法就是将边框的属性加在hover属性里面，未显示时的边框设置为零。
未显示时属性为（ display: none;）显示时属性为（display: block;），结果就是能够显示与隐藏，但是动画效果没有表现出来。想不通
除了使用display的属性之外，还可以使用：下拉菜单栏的隐藏通过使菜单栏的属性overflow: hidden; 来实现。
list中（隐藏时）的height设置为零，hover中（显示时）的height设置为110px，使用动画transition属性来过渡。
同样是通过overflow: hidden;实现隐藏，但是是通过visibility:visible;显示隐藏，动画效果仍然有效。
就是相比方法二将hover里面的属性由display: block; 改为visibility:visible;
以上均为鄙人实践的结果，理解甚微，纰漏繁多，还请斧正。
比如说：下拉菜单收起时的动画没有搞明白怎样控制，而且下拉菜单收起时的动画没有边框；假如使用visibility: hidden;和visibility:visible;实现隐藏和显示时，会出现动画效果播放完之前，下拉菜单栏内容已经展示出来。
如下图所示：
超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准， 它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，如何显示等）。
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：indexhtml。
2、在indexhtml中的<body>标签中，输入html代码：<input type="text" style="outline: none;" />。
3、浏览器运行indexhtml页面，此时输入框选中后出现的蓝色边框被去除了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）