Geek Answers Handbook

JQuery Bounce makes CSS buttons disappear

I recently replaced my button images (where the jQuery code worked very well) with CSS buttons, and now they disappear as soon as I click on them (which activates the rollback function).

Demo: http://jsfiddle.net/KGAmZ

Any help would be greatly appreciated!

+4
source share
2 answers

Top edge rules drop everything. Remove margin-top from #mainMenu and replace it with top: -45px . Then remove the top rule from .mainMenuButton and you should be set.

 #mainMenu { position: relative; width: 1024px; height: 80px; z-index: inherit; top: -45px; zoom: 1; /* For IE6 */ } .mainMenuButton { float: left; text-align: center; width: 128px; height: 80px; background-color: #ddd; padding: 0px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; behavior: url(js/border-radius.htc); }

Edit: I am new to violin. Example also: http://jsfiddle.net/KGAmZ/8/

+4
source

You are calling the wrong class.

Change it to this and it works

 $(".mainMenuButtonText").click(function()

Example: http://jsfiddle.net/jasongennaro/KGAmZ/2/

EDIT

According to your comment below ... in this case, just delete top: -45px; from the .mainMenuButton rule.

Example 2: http://jsfiddle.net/jasongennaro/KGAmZ/9/

+2
source

More articles:


All Articles