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技巧，可以产生这种效果。缺点是内部不能透明。

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 2

您可以使用不同的笔划类型将2个div放在彼此的顶部，然后将它们转换出来。

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
}
div {
  width: 11rem;
  height: 11rem;
  margin: auto;
  background-color: #f2f2f2;
  border: 5px #bbb solid;
  border-radius: 2rem;
  opacity: 1;
  cursor: pointer;
}
.dotted {
  border: 5px #bbb dotted;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50% );
  z-index: 0;
}
.solid {
  position: relative;
  z-index: 1;
  transition: opacity 1s;
}
.solid:hover {
  opacity: 0;
}

<div class="solid"></div>
<div class="dotted"></div>

Answer 3

您可以使用伪元素实现此目的。此版本即使在透明背景下也能正常工向身体添加渐变以显示此信息。

div {
  position: relative;
  
  /* just styles for demo */
  width: 250px;
  height: 250px;
  border-width: 5px;
  border-style: solid;
  transition: 1s ease-in-out all;
  border-radius: 10px;
}

div:after {
  position: absolute;
  content: ' ';
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  border-width: inherit;
  border-style: dotted;
  border-radius: inherit;
}

div, div:after {
  border-color: tomato;
}

div:hover {
  border-color: transparent;
}

/* just styles for demo showing that this will work even for transparent background */
body {
  background-image: linear-gradient(to bottom, transparent, #ddd);
  min-height: 100vh;
  margin: 0;
}

<div></div>

Answer 4

这不是一个优雅的解决方案，但它取消了“Niet the Dark Absol”对我原始问题的评论。这是代码：

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

如何淡化CSS中元素的更改

4 个答案: