Question

我有一个下拉菜单，其中溢出文本已渐变出来。选区的包装器已应用过渡，但是现在将其悬停时看起来有些奇怪。如何使它看起来更好？

html片段：

<div class="durationDropdown">
  <select role="listbox" class="durationSelect">
   <option value="0">Less than 1 month</option>
  </select>
</div>

css片段：

.container {
  width: 150px;
}

.durationDropdown {
  padding: 0px;
  flex: 1;
  text-align: left;
  position: relative;
  cursor: pointer;
  height: 5.1875rem;
  transition: 250ms;
  border: 1px solid #eee;
}

.durationDropdown::after {
  content: "";
  display: block;
  width: 40px;
  top: 0%;
  right: 0;
  height: 100%;
  position: absolute;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 63%);
  pointer-events: none;
}

.durationDropdown:hover::after,
.durationDropdown:active::after {
  background: none;
}

.durationDropdown:hover {
  background: black;
}

这是我的fiddle，在这里您可以看到它的样子以及小提琴中的其余CSS。任何帮助/建议都很棒！

Answer 1

恐怕您不能在渐变中添加过渡效果，请在Use CSS3 transitions with gradient backgrounds处查看详细信息。

您真正看到的是'color'属性的平滑变化，而不是渐变过渡。如果要隐藏带有渐变的句子的一部分并对其进行平滑过渡，可以这样做： -向“ durationDropdown :: after”元素添加过渡，并替换为“ background：none;”通过“不透明度：0；”像这样：

.durationDropdown::after {
  ...
  transition: 250ms opacity ease-in-out;
  ...
}

.durationDropdown:hover::after,
.durationDropdown:active::after {
  /* background: none; */
  opacity: 0;
}

文本溢出渐变-悬停关闭时过渡不平滑

1 个答案: