Question

将鼠标悬停在按钮上时如何反转渐变？请查看此处的“更多阅读”按钮，以查看实际效果：https://carney.co/daily-carnage/。请注意，将鼠标悬停在按钮上时，黄色会向左移动，粉红色会向右移动。

我尝试关闭按钮容器上的过渡效果，以查看是否这样做，但是即使禁用此功能，悬停效果仍然存在。

将鼠标悬停在按钮上时，我希望黄色现在位于左侧，粉色位于右侧（如此反转）

Answer 1

要反转hover上的渐变

HTML

   <div id="dd">This is div</div>

CSS

#dd {
  background: linear-gradient(to bottom right, yellow, #ff0066);
  }

#dd:hover {
  background: linear-gradient(to top left, yellow, #ff0066); 

  /* or */
  /* background: linear-gradient(to bottom right, #ff0066, yellow); */
  }

Answer 2

根据您提供的示例，可以在suedo类之前和之后使用。您可以删除之前的过渡，以消除潜在的白色“闪烁”。

示例：https://codepen.io/SROwl/pen/MdjLvj

<button>Gradient Change</button>  



  button {
    position: relative;
    -webkit-appearance: none;
    background: transparent;
    font-size: 30px;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
  }
  button::before {
    content: '';
    background-image: linear-gradient(purple, orange);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    transition: opacity 250ms ease;
  }
  button::after {
    content: '';
    opacity: 0;
    background-image: linear-gradient(orange, purple);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    transition: opacity 250ms ease;
  }
  button:hover::before, button:active::before, button:focus::before {
    opacity: 0;
  }
  button:hover::after, button:active::after, button:focus::after {
    opacity: 1;
  }

悬停在按钮上时如何反转按钮

2 个答案: