div.wrap -for(var i=0;i<3;i++) -for(var j=0;j<3;j++) a.tab.circle i.fa.fa-times i.fa.fa-circle-o div.tab.circle i.fa.fa-times i.fa.fa-circle-o body color #b6b5ca font-family 'Arial', sans-serif margin 0 text-align center.wrap width 500px margin 0 auto div background-color #b0dfe5 display none &.circle i.fa-circle-o display inline!important &.cross:hover i.fa-times display inline!important.tab width 150px height 150px background-color #d08aac display inline-block vertical-align middle margin 5px border-radius 14px cursor pointer font-size 70px line-height 150px color #eee text-shadow 2px 2px 4px rgba(0, 0, 0, 0.2) i display none!important &:hover background #aaa &.circle:hover i.fa-circle-o display inline!important &.cross:hover i.fa-times display inline!important var state = (function () { var flag = true return { changeState: function () { flag = !flag }, getState: function () { return flag } }})(this)$('.wrap').on('click', 'a', function () { state.changeState() var $A = $('.wrap a') .toggleClass('circle', state.getState()) .toggleClass('cross', !state.getState())})$('') /* $('a').mouseover(function(){$(this).css('background-color','#ddd')})*/