用另一個懸停的按鈕替換一個按鈕不工作jQuery

Question

我有兩個按鈕，我只想顯示一個按鈕，但一旦懸停，按鈕將被另一個按鈕替換並返回到第一個按鈕鼠標移開。

我拿出下面的一段代碼，但是在懸停時它會一直在兩個按鈕之間來回移動，那麼最好的方法是什麼？

$(document).ready(function() { 
 
      $('.price').on('mouseover',function() {   
 
       $(this).css('display','none'); 
 
       $(this).next('.buy').css('display','block'); 
 
      }); 
 

 
     $('.price').on('mouseout',function() {   
 
       $(this).css('display','block'); 
 
       $(this).next('.buy').css('display','none'); 
 
      }); 
 
     });

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="price-div" style=" 
 
    display: block; 
 
"> 
 
                     <button type="button" class="btn btn-default price" style="display: block; z-index: 9999999999999; position: absolute;"> $589.50                   <!-- <button type="button" class="btn btn-default compare"><i class="fa fa-bar-chart"></i>Compare</button> --> 
 
            </button><button type="button" class="btn btn-default buy" value="Add to Cart" onclick="addToCart('43');" style="display: none; z-index: 999999; position: absolute;"><i class="fa fa-shopping-cart"></i> Add To Cart</button> 
 
           </div>

$ 589.50比較 - > 放入購物車

Answer 1

爲什麼它不斷顯示/隱藏所有的時間，就是因爲只要.buy所示，鼠標移開被觸發，所以把.buy元件

$('.price').on('mouseover',function() {   
    $(this).css('display','none'); 
    $(this).next('.buy').css('display','block'); 
}); 

$('.buy').on('mouseout',function() {   
    $(this).prev('.price').css('display','block'); 
    $(this).css('display','none'); 
}); 

DEMO

在鼠標移開