CSS 样式设计 jquery页面动效 常见问题记录

1、通过伪元素的方式，增添设计元素，:after 与类之间，都不能有空格！！

            .nav-link:after {
				content: "";
				display: block;
				width: 2em;
				height: 0.06rem;
				background-color: #22d5e6;
				position: absolute;
				/* left: 10%; */
				top: 50%;
				margin-top: 1em;
			}

效果，如图示中文字下方的蓝色小线段：

2、优化第1点，默认不展示 after效果，当鼠标进入时才展示，在类与after直接，增加hover：

        .nav-link:hover:after {
				content: "";
				display: block;
				width: 2em;
				height: 0.2rem;
				background-color: #22d5e6;
				position: absolute;
				/* left: 10%; */
				top: 50%;
				margin-top: 1em; 
			}

 效果：

​​​​​​​

 

3、在网页的导航栏位置，通常会需要用到鼠标进入与离开事件，以触发展示或收起div的效果，此时，触发鼠标事件对象的位置与展示div的位置必须相互衔接，不能留有空隙，否则，会出现展示div中的内容无法点击的问题。