Html 如何在CSS中淡入对元素的更改

当元素悬停在CSS中时，我试图淡入对元素的编辑。具体来说，通过在更改中褪色，将边框从实线更改为虚线，我如何做到这一点

编辑：

也许我需要更具体地了解上下文，这是我当前的代码：

li {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: black;
  border-bottom: 1px solid black;
}

li:hover {
  border-bottom: 1px dotted black;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}

---

您可以将两个具有不同笔划类型的div放置在彼此的顶部，然后将它们转换出来

* { 框大小：边框框； } html， 身体{ 身高：100%； 保证金：0； } 身体{ 显示器：flex； } div{ 宽度：11雷姆； 身高：11雷姆； 保证金：自动； 背景色：F2F2； 边框：5pxBBB实心； 边界半径：2em； 不透明度：1； 光标：指针； } .点点{ 边框：5pxBBB点； 位置：绝对位置； 最高：50%； 左：50%； 转换：翻译-50%，-50%； z指数：0； } .固体{ 位置：相对位置； z指数：1； 过渡：不透明度1s； } .实心：悬停{ 不透明度：0； } 是一些CSS的诡计，使之产生这种效果。缺点是内部不能透明

div{ 位置：相对位置； 宽度：50px； 高度：50px； 显示：块； 边框：3个点红色； 背景：红色； 过渡：1s轻松输入输出全部； } 部门：之后{ 位置：绝对位置； 内容：''； 排名：0； 底部：0； 左：0； 右：0； 背景：白色； } div:悬停{ 背景：透明； }

---

您可以使用伪元素来实现这一点。此版本甚至可以在透明背景下工作。为主体添加了渐变以显示这一点

div{ 位置：相对位置； /*只是演示的样式*/ 宽度：250px； 高度：250px； 边框宽度：5px； 边框样式：实心； 过渡：1s轻松输入输出全部； 边界半径：10px； } 部门：之后{ 位置：绝对位置； 内容：''； 顶部：-5px； 底部：-5px； 左：-5px； 右：-5px； 边框宽度：继承； 边框样式：虚线； 边界半径：继承； } 迪夫，迪夫：之后{ 边框颜色：番茄； } div:悬停{ 边框颜色：透明； } /*只是演示样式显示，这将工作，即使是透明的背景*/ 身体{ 背景图像：线性渐变至底部，透明，ddd； 最小高度：100vh； 保证金：0； }

---

这不是一个非常优雅的解决方案，但它偏离了“黑暗绝对”对我最初问题的评论。代码如下：

li {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  color: black;
  position: relative;
  border-bottom: 1px solid transparent; /* invisible border */
}

li:before, li:after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  margin: -1px; /* same as border width */
  transition: opacity 1s linear;
}

li:before {
  border-bottom: 1px solid #000;
}

li:after {
  border-bottom: 1px dotted #000;
  opacity: 0;
}

li:hover:before {
  opacity: 0;
}

li:hover:after {
  opacity: 1;
}

---

一般来说，有过渡。但是您无法转换边框样式属性，抱歉。您需要第二个元素，您可以在其上交叉淡入淡出…某些属性不能淡入淡出，但通常您可以使用transition:all ease 1s，其中1s表示淡入淡出发生的持续时间（以秒为单位）。我将使用伪元素并将其不透明度转换为：hover而不是使用伪元素。使用伪元素而不是额外的标记做得更好，但仍然是一个好方法。True。Pseudo将比HTML少一行，可能更优雅一点CSS.Nice-using-after使它更干净。