用另一个悬停的按钮替换一个按钮不工作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

在鼠标移开