absolute标题图片覆盖文字实例页面

CSS代码：

.title{line-height:18px; margin:1em 0; font-family:'微软雅黑'; font-size:16px;}
.title a{width:80px; height:18px; *margin-top:2px; background:url("http://img04.taobaocdn.com/tps/i4/T1AdioXexkXXXXXXXX-97-168.png") no-repeat; text-decoration:none!important; position:absolute;}
.title_1 a{background-position:0 -64px;}
.title_2 a{background-position:0 -86px;}
.title_3 a{background-position:0 -108px;}
.title_4 a{background-position:0 -21px;}

.title_1{color:#06f;}
.title_2{color:#960;}
.title_3{color:#54C012;}
.title_4{color:#f60;}
                

HTML代码：

<h4 class="title title_1"><a href="#"></a>便民服务</h4>
<h4 class="title title_2"><a href="#"></a>卡券&amp;票务</h4>
<h4 class="title title_3"><a href="#"></a>生活超市</h4>
<h4 class="title title_4"><a href="#"></a>外卖&amp;外送</h4>
<p><input type="button" id="button" value="背景图切换显示" /></p>
                

jQuery使用代码：

var strStyle = '<style id="style" type="text/css">.title a{background:none;}</style>';
$("#button").click(function() {
    var eleStyle = $("#style");
    if (eleStyle.size()) {
        eleStyle.remove();
    } else {
        $(strStyle).appendTo($("head"));
    }
});