Question

从元素上移除悬停后，我希望边框恢复到正常位置，这在chrome，Firefox中工作正常，但不能在边缘工作

  <span class="cta-content">
       <span class="cta-text">demo</span>
       <span class="icon">i</span>
   </span>

.cta-content{
            background: linear-gradient(0deg, blue, blue) bottom left no-repeat;
            background-color: none !important;
            background-size: 0px 1px;
            transition: 0.5s background-size;
            text-decoration: none;
            display: inline !important;
        }
        .cta-content:hover{
            background-size: 100% 1px;
            color:red;
        }

  <span class="cta-content">
           <span class="cta-text">demo</span>
           <span class="icon">i</span>
       </span>

Answer 1

始终添加HTML呈现引擎。

.cta-content {
  background: linear-gradient(0deg, blue, blue) bottom left no-repeat;
  background-color: none !important;
  background-size: 0px 1px;
  -webkit-transition: 0.5s background-size;
  -moz-transition: 0.5s background-size;
  -o-transition: 0.5s background-size;
  transition: 0.5s background-size;
  text-decoration: none;
  display: inline !important;
}

.cta-content:hover {
  background-size: 100% 1px;
  color: red;
}

<span class="cta-content">
       <span class="cta-text">demo</span>
<span class="icon">i</span>
</span>

边框不回来，从EDGE中的元素上移除了悬停

1 个答案: