html - 如何淡化对 CSS 中元素的更改

Question

当鼠标悬停在 CSS 元素上时，我试图淡化对元素的编辑。具体来说，将 border 从 solid 更改为 dotted，通过淡化更改，我该怎么做？

编辑:

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

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;
}

Answer 1

Here是一些 CSS 技巧可以产生这种效果。缺点是内部不能透明。

div {
  position: relative;
  width: 50px;
  height: 50px;
  display: block;
  border: 3px dotted red;
  background: red;
  transition: 1s ease-in-out all;
}

div:after {
  position: absolute;
  content: ' ';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
}

div:hover {
  background: transparent;
}

<div></div>