javascript - Replace a button with another on hover not working jQuery -


i have 2 buttons, , want display 1 button displayed @ time on hover, button replaced , first button on mouseout.

i came out following piece of code on hover keeps going , forth between 2 buttons, best way ?

 $(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 cart" onclick="addtocart('43');" style="display: none; z-index: 999999; position: absolute;"><i class="fa fa-shopping-cart"></i> add cart</button>                                  </div>
$589.50 compare --> add cart

the reason why keeps on showing/hiding time because .buy shown, mouseout gets triggered, put mouseout on .buy element

$('.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


Comments

Post a Comment

Popular posts from this blog

php - Submit Form Data without Reloading page -

i know question has been asked , answered bunch of times life of me can not solution work on code. believe if redo code, work properly, , in retrospect time i've spent on issue should have redone code...but beyond deadline , have working prototype up... can advise how update multiple forms on single page without reloading page? horrible @ php , complete noob js/jquery/ajax @ best. html/php in single file , believe causing me problems/is largest obstacle @ getting ajax form processing work. basically, want users to: select teams multiple dropdowns in form group 1 (league champs) , on update update db newly selected team without reloadding page. edit team scores per match , on score submit/update, update db new scores. for each requirement there multiple forms (1 each leagues, 1 each per match) have set class on each form id. everything works via php, form submission reloads page each time submitted , not ideal. i have tried ajax code here http://scotch.io/tutoria...
Read more

linux - Rails running on virtual machine in Windows -

the reason why want switch ubuntu people said gems works better on linux on windows. i don't want macbook pro rails development since love windows , cannot stand lack of apps mac. moreover, people saying ubuntu "better" mac: http://www.reddit.com/r/ubuntu/comments/1bgj1s/are_there_advantages_of_ubuntu_over_os_x_for/ does virtual box work enough doesn't have lag @ all? using i7-3517u cpu 8gb memory. need program in environment lag-free , not sluggish. or there alternatives recommend? i unsure permission settings or complicated stuffs regarding terminal. i'll using terminal develop. i'm still quite new here development in linux. please kind me >< thanks. @holyxiaoxin pretty sure should asking on superuser instead. nevertheless, suggest install ubuntu in partition instead of running virtual machine. here's guide https://help.ubuntu.com/community/windowsdualboot also, yes. developing in virtual machine accurate, @ end experiment w...
Read more