ロールオーバーできません!!why？

例の如く参考書を元に

『読者になる』のロールオーバーをしてみようと

/* 読者になるボタンロールオーバー */
#readerList img {
visibility : hidden ;
}
#readerList dl a{

display: block;
padding:0;
margin:0;

height:50px;/*画像の縦*/
background-repeat : no-repeat ;
background-image : url(最初の画像のURL) ;
}
#readerList dl a:hover {
background-repeat : no-repeat ;
background-image : url(マウスがのったときの画像のURL);
}

記述したのですが、ボタンが透明になっちまった。why？

別のページ見ると

/* 読者になるボタンロールオーバー */
#readerList img {
visibility : hidden ;
}
#readerList dl a{
width:150px;/*　画像の横幅　*/
height:80px;/*　画像の縦　*/
display:block;
background-repeat : no-repeat;
background-image : url(画像のURL);
}
#readerList dl a:hover {
background-position: 0 -80px;
}

とある。

/* ブログを作るボタンロールオーバー */
#ameblo a#btn_blog img {
visibility : hidden ;
}
#ameblo a#btn_blog{
width:150px;/*　画像の横幅　*/
height:80px;/*　画像の縦　*/
display:block;
background-repeat : no-repeat;
background-image : url(画像のURL);
}
#ameblo a#btn_blog:hover {
background-position: 0 -80px;
}

とある。

why？

しかもひかえおろーのプラグインを外して、某スキンにしたら

はねのけられるしよー。

どういうこっちゃー!!