将鼠标悬停时的按钮替换为另一个不起作用的按钮jQuery

Replace a button with another on hover not working jQuery

本文关键字：按钮 另一个 不起作用 jQuery 替换 鼠标 悬停      更新时间：2023-09-26

我有两个按钮，我想一次只显示一个按钮，但在悬停时，该按钮将被另一个按钮取代，并返回到mouseout上的第一个按钮。

我给出了下面的一段代码，但在悬停时，它一直在两个按钮之间来回移动，最好的方法是什么？

 $(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美元比较-->添加到购物车

它之所以一直显示/隐藏，是因为一旦显示.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

相关文章：