用ul li实现边框重合并附带鼠标经过效果

要使用ul和li标签实现边框重叠,并附带鼠标经过效果,可以按照以下步骤进行操作:

要使用ulli标签实现边框重叠,并附带鼠标经过效果,可以按照以下步骤进行操作:

  1. 创建一个无序列表ul,并添加需要展示的内容,例如:
<ul>
  <li>菜单1</li>
  <li>菜单2</li>
  <li>菜单3</li>
</ul>
  1. 使用CSS对ulli进行样式修改,例如:
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}

li {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  position: relative;
}

li:first-child {
  border-left: none;
}

li:last-child {
  border-right: none;
}

li:hover {
  background-color: #ccc;
  color: #fff;
}

li:hover:before, li:hover:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-style: solid;
}

li:hover:before {
  left: -2px;
  top: -2px;
  border-width: 0 0 10px 10px;
  border-color: transparent transparent #ccc transparent;
}

li:hover:after {
  right: -2px;
  top: -2px;
  border-width: 0 10px 10px 0;
  border-color: transparent #ccc transparent transparent;
}

解释以上CSS代码的作用:

  • list-style: none;:去掉ul的默认样式,即圆点
  • padding: 0; margin: 0;:去除ul的内外边距,使菜单显示更整齐
  • display: inline-block;:让ul和li变成inline-block,方便水平排列
  • display: inline-block;:设置li为inline-block,让li水平排列
  • padding: 10px 20px;:设置li的内边距,让菜单内容看起来更舒适
  • border: 1px solid #ccc;:设置li的边框颜色为灰色
  • position: relative;:设置li的定位为相对
  • li:first-child {border-left: none;}:去掉第一个菜单项的左边框
  • li:last-child {border-right: none;}:去掉最后一个菜单项的右边框
  • li:hover {background-color: #ccc;color: #fff;}:当鼠标移动到菜单项上时,改变背景颜色和字体颜色
  • li:hover:before, li:hover:after {...}:当鼠标移动到菜单项上时,添加伪元素beforeafter,制作出多重边框的效果

接下来,我们提供两个实例,以帮助更好地理解这个过程:

  1. 两个仅使用border的边框重叠效果
<ul>
  <li>菜单1</li>
  <li>菜单2</li>
  <li>菜单3</li>
</ul>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}

li {
  display: inline-block;
  padding: 10px 20px;
  position: relative;
}

li:before, li:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  top: -2px;
  left: -2px;
  z-index: -1;
}

li:before {
  border-right: none;
  border-bottom: none;
}

li:after {
  border-left: none;
  border-top: none;
}

li:hover {
  background-color: #ccc;
  color: #fff;
}
  1. 使用伪元素创建了多重边框效果和背景色变化
<ul>
  <li>菜单1</li>
  <li>菜单2</li>
  <li>菜单3</li>
</ul>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}

li {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  position: relative;
}

li:first-child {
  border-left: none;
}

li:last-child {
  border-right: none;
}

li:hover {
  background-color: #ccc;
  color: #fff;
}

li:hover:before, li:hover:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-style: solid;
}

li:hover:before {
  left: -2px;
  top: -2px;
  border-width: 0 0 10px 10px;
  border-color: transparent transparent #ccc transparent;
}

li:hover:after {
  right: -2px;
  top: -2px;
  border-width: 0 10px 10px 0;
  border-color: transparent #ccc transparent transparent;
}

以上两个示例仅仅是实现的不同,并且使用的是不同的CSS代码,但思路都是相同的,因此我们可以从中学到如何使用ulli标签来创建菜单,同时使用CSS来实现边框重叠和鼠标移动效果。

本文标题为:用ul li实现边框重合并附带鼠标经过效果

基础教程推荐