如何在滑鼠懸停時在兩個元素之間添加空間

HTML:

 <div class="main-text"> 
           <h2>Surface laptop Go</h2> 
            <p>使用我們更大的surface筆記本電腦，充分利用每一天</p>/span>
            <button>/span>
                   <span> 現在購物 </span>/span> 
                  <i class="fa-angle-right"/span>> </i>>
            </button>  
        </div>/span>
       

CSS:

 .main-text button { 
          padding: .8rem 1.5rem;
         border: none;
         背景顏色。#000;
         color: #fff;
         游標: 指標。
       }

       .main-text span:hover{
          邊框-底部: 2px #fff solid;
       }

       

我不知道如何在滑鼠懸停時移動兩個元素之間的中間空間。參考一下。https://www.microsoft.com/ shop now按鈕

uj5u.com熱心網友回復：

.main-text button { 
         width:150px;
         height:50px;
         border: none;
         background-color: #000;
         color: #fff;
         cursor: 指標。
         transition：0.2s。
       }

       .main-text span：hover{
          border-bottom: 2px #fff solid;
       }

       button:hover span
       {
         padding:0 5px;
         transition:0.2s。
         text-decoration:underline;
       }

<div class="main-text"> /span>
      <h2>Surface laptop Go</h2> 
       <p>使用我們更大的surface筆記本電腦，充分利用每一天</p>/span>
       <button>/span>
              <span>現在購物 </span>/span>
              <span><svg style="fill: white;" version="1. 1"/span> xmlns="http://www.w3.org/2000/svg"/span> xmlns:xlink="http://www.w3. org/1999/xlink" width="8" height="8" class="svg-fg" viewBox="0 0 30 48" style="strok-width: 1px"><path d="M0 4。 7C6.4 11.1 12.8 17.5 19.4 24 12.9 30.4 6.5 36.7 0.1 43.1C1.7 1.7 3.3 3.7 4.7 8-8 16.1-16 24.2-24 -8.1-8-16.1-16 24.2-24C3.4 1.3 1.8 2.9 0 4. 7z"></path>< path d="M0 4. 7c1.8-1. 8 3.4-3.4 4.9-4.9 8 8 16.1 16 24.2 24 -8.1 8-16.1 16-24.2 24 -1.5-1.5-3.1-3.1-4.7-4.7C6.5 36.7 12.9 30.4 19.4 24 12.8 17.5 6.4 11.1 0 4. 7z"></path>< svg></span> 
             <i class="fa-angle-right"/span>> </i>>
       </button>  
   </div>/span>

你可以使用上述代碼來實作你的預期輸出。

uj5u.com熱心網友回復：

你可以試試這段代碼來實作。

*{box-sizing: border-box;}。
.main-text button { 
          padding: .8rem 1.5rem;
         border: none;
         background-color: #000;
         color: #fff;
  width: 120px;
         cursor: 指標。
       }

.main-text span{transition: . 2s ease all; position: relative; margin-right: 10px; display: inline-block;
border-bottom:2px solid #000; }
.main-text span: :after {
  content: '>';
  position: absolute;
  right: -15px;
  transition: .2s ease all;
}
       .main-text span：hover{
         border-color: #fff;
         margin-left: -15px;
       }
.main-text span:hover:: after {
  right: -25px;
}

<div class="main-text"> /span>
           <h2>Surface laptop Go</h2> 
            <p>使用我們更大的surface筆記本電腦，充分利用每一天</p>/span>
            <button>/span>
                   <span> 現在購物 </span>/span>
            </button>/span> 
        </div>/span>

標籤：

上一篇：我怎樣才能"點擊"firefox控制臺中的所有div？

下一篇：在Java中使用正則運算式來識別相同的字串